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

こんにちは、ryohei(@ityryohei)です!

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

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

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

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

本記事で作成する内容

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

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

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

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

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

テーブルを作成する

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

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

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-forindexで削除する行数を取得します。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でボタンクリックでテーブルの行を追加・削除する方法のご紹介でした!

Adobe Creative Cloudのコンプリートプランを特別価格で手に入れよう!

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍