Vue.jsを使用してテーブルに動的に行を追加する方法

データ配列を使用する方法: Vue.jsでは、データ配列を使用してテーブルの行を管理することができます。データ配列を更新すると、自動的にテーブルに反映されます。

HTML:

<table>
 <tr v-for="item in items" :key="item.id">
   <td>{{ item.name }}</td>
   <td>{{ item.description }}</td>
 </tr>
</table>
<button @click="addItem">行を追加</button>

Vueインスタンス:

new Vue({
 el: '#app',
 data: {
   items: [
     { id: 1, name: 'アイテム1', description: '説明1' },
     { id: 2, name: 'アイテム2', description: '説明2' }
   ]
 },
 methods: {
   addItem() {
     const newItem = { id: this.items.length + 1, name: '新しいアイテム', description: '新しい説明' };
     this.items.push(newItem);
   }
 }
});

上記のコードでは、itemsというデータ配列がテーブルの行を表しています。addItemメソッドは、新しい行をitemsに追加するために使用されます。

テーブルコンポーネントを使用する方法: より柔軟な方法として、Vue.jsのコンポーネントを使用してテーブルを作成することもできます。コンポーネントを使用することで、テーブルの追加や削除などの操作が簡単になります。

Vueコンポーネント:

Vue.component('table-component', {
 data() {
   return {
     items: [
       { id: 1, name: 'アイテム1', description: '説明1' },
       { id: 2, name: 'アイテム2', description: '説明2' }
     ]
   };
 },
 methods: {
   addItem() {
     const newItem = { id: this.items.length + 1, name: '新しいアイテム', description: '新しい説明' };
     this.items.push(newItem);
   }
 },
 template: `
   <div>
     <table>
       <tr v-for="item in items" :key="item.id">
         <td>{{ item.name }}</td>
         <td>{{ item.description }}</td>
       </tr>
     </table>
     <button @click="addItem">行を追加</button>
   </div>
 `
});
new Vue({
 el: '#app'
});

上記のコードでは、table-componentというVueコンポーネントが定義されています。このコンポーネント内で、テーブルの行を管理するデータ配列とaddItemメソッドが定義されています。table-componentを<table-component></table-component>のようにHTML内に配置することで、テーブルが表示されます。