「Vue.js」テーブルの行を追加、削除するサンプル

2014年1月9日2021年8月17日

書式
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)
        },
    }
})