【Vue.js】⑤[v-for]でテーブル形式の表示も任せる。

[v-for]でテーブル行追加も自動生成

前回はリストを作成しましたが、今回はテーブルを作成してみます。

業務などで使用される場合は、こちらのパターンが多いのではないでしょうか？

なにはともあれ、まず表示。

【すしテーブル】

こちらも「追加」をクリックすると、どんどんリストが作成されます。

今回はこちらを触っていきます。

【HTML部分】

    <div id="app">
        <input v-model="netaName" /><button @click="addItem">追加</button>
        <table id="itemList" border="1">
            <tr><td>すしリスト</td></tr>
            <tr v-for="item in shari"><td>{{ item }}</td></tr>
        </table>
    </div>

リスト形式と異なり、<tr>タグ<td>タグで囲むだけです。

JavaScript部分

        var netas   = ['いくら', '大トロ', 'キングサーモン', 'キャビア', 'ウニ', 'あわび', 'アボカド', 'とびっこ', '白子', '軍艦'];
        var random  = 0;
        new Vue({
            el: "#app",
            data: {
                shari: [],
                netaName: "いくら"
            },
            methods: {
                addItem() {
                    //ランダム整数作成
                    var random = Math.floor(Math.random() * netas.length)
                    //生成
                    this.shari.push(this.netaName)
                    //次のためにテキストボックスに文字を落とす
                    this.netaName = netas[random]
                }
            }
        })

前回のリスト作成のものとJavaScript部分は変更ありません。

基本的に処理部分は共通なので、HTML部分に関係なく使いまわせます。

同様の仕組みが使用できるということは、項目数同じでデザインだけ違う部分は１つのコンポーネントを使いまわせますのでDOMの操作をしないことはかなり恩恵を受けることになります。

作り方は昨日のものと同じです。

https://biiver.com/vue-js-4