【Vue.js】ボタンクリックでテーブルの行を追加・削除する

こんにちは、Ryohei（@ityryohei）です！

本記事では、Vue.jsでボタンクリックでテーブルの行を追加・削除する方法をご紹介しています。

Vue.jsでテーブルの行をユーザー側で追加・削除できるようにしたいんだけど、良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

本記事で作成する内容

今回作成するのは、ボタンをクリックで行(tr)を追加・削除することができるテーブルです。下記のデモで内容をご確認いただけます。

See the Pen 7122 by ryohei (@intotheprogram) on CodePen.

動きとしては単純で、行を追加をクリックするとテーブルの行を追加し、削除をクリックすると対象の行を削除する、といった内容です。

デモ環境のVueはver2.6.11を使用しています。Vue3では少し作法が異なりますが、追加・削除する関数内の処理は正常に動作しますのでご安心ください。

では作り方をご紹介していきます。

テーブルを作成する

HTMLでレイアウトを作成します。デモの内容と同様にtableとinputとbuttonを設置します。

ソースの見通しを良くするためにidやclassは最低限のものだけにしています。実際に使用される場合は各要素にスタイルを付けてご使用ください。

HTML

<div id="app">
    <table>
        <thead>
            <tr>
                <th>名前</th>
                <th>メールアドレス</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(user, index) in users" v-bind:key="user.id">
                <td><input v-model="user.name"></td>
                <td><input v-model="user.email"></td>
                <td><button v-on:click="del(index)">削除</button></td>
            </tr>
        </tbody>
    </table>
    <button v-on:click="add">行を追加</button>
</div>

v-forのindexで削除する行数を取得します。buttonにはそれぞれクリックイベントで実行するメソッドを指定しています。メソッドの中身は後ほどご紹介します！

Vueインスタンスを作成する

続いてVueインスタンスを作成します。前項のHTMLで必要になるdataオブジェクトのプロパティを用意します。実際に使用する環境に応じてプロパティは変更してくださいね。

Vue.js

new Vue({
    el: '#app',
    data() {
        return {
            users: [{ name: '', email: '' }]
        }
    }
})

テーブルの行を追加・削除するメソッドを作成する

最後にテーブルの行を追加・削除するメソッドを作成します。全体は下記のようになります。

Vue.js

new Vue({
    el: '#app',
    data() {
        return {
            users: [{ name: '', email: '' }]
        }
    },
    methods: {
        add: function(){
            this.users.push({ name: '', email: '' })
        },
        del: function(index){
            this.users.splice(index, 1)
        },
    }
})

Arrayオブジェクトが持っているメソッドでテーブルの行の追加・削除を実現しています。add()で指定しているpush()の引数のプロパティは省略可能ですが、指定しておいた方が無難かなと思います。

各メソッドの詳細につきましては下記をご参照ください。