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

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

本記事では、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()の引数のプロパティは省略可能ですが、指定しておいた方が無難かなと思います。

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

push()	Array.prototype.push()
splice()	Array.prototype.splice()

最後に

久しぶりのVueに関する記事になります。最近Vue+Stripeで個人的に作りたかったWebアプリを開発中でして、高頻度でVueを触っています。開発は60%くらい完了していますが、利用規約作りが残っているので、公開はまだまだ先になりそう……。

Vueは触っていて楽しいので、しばらくはVueに関する投稿が続くかもしれないですが、温かく見守っていただければ幸いです。

以上、Vue.jsでボタンクリックでテーブルの行を追加・削除する方法のご紹介でした！