「Vue.js」テーブルの行を追加、削除するサンプル
書式
methods: {
関数名: function(){
//some code
},
htmlコード
<div id="app"> <table> <thead> <tr> <th>住所</th> <th>備考</th> </tr> </thead> <tbody> <tr v-for="(user, idx) in users" v-bind:key="user.id"> <td><input v-model="user.addr"></td> <td><input v-model="user.memo"></td> <td><button v-on:click="rowDel(idx)">削除</button></td> </tr> </tbody> </table> <button v-on:click="add">追加</button> </div>
2.テーブルの行を追加、削除
new Vue({ el: '#app', data() { return { users: [{ addr: '', memo: '' }] } }, methods: { add: function(){ this.users.push({ addr: '', memo: '' }) }, rowDel: function(idx){ this.users.splice(idx, 1) }, } })