Vue.js 3を使ってTableをカスタマイズしていく（データの追加・削除）

はじめに

Vue.js 3系を使ってテーブルを色々カスタマイズして行こうと思います。

前回に引き続き、テーブルのデータを追加したり、削除したりしていきます。

【動画サイズ：204KB】

環境

この記事は、以下の管理人の検証環境にて記事にしています。

完成ソースコード

<div id="app" class="container">
  <button @click="doAdd">追加</button>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th v-for="(label, key) in header" :key="key">{{label}}</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in items" :key="item.no">
        <td v-for="(label, key) in header" :key="'td'+key+item.no">{{item[key]}}</td>
        <td><button @click="doRemove(index)">削除</button></td>
      </tr>
    </tbody>
  </table>
</div>

const App = {
  data() {
    return {
      header: {no:'No', name:'Name', email:'E-Mail'},
      items:[
        {no:1, name:'Daiki', email:'[email protected]'},
        {no:2, name:'Naoki', email:'[email protected]'},
        {no:3, name:'Yuki', email:'[email protected]'},
        {no:4, name:'Aoi', email:'[email protected]'},
        {no:5, name:'Hnako', email:'[email protected]'},
        {no:6, name:'Momo', email:'[email protected]'},
        {no:7, name:'Taro', email:'[email protected]'}, 
        {no:8, name:'Shiori', email:'[email protected]'},
        {no:9, name:'Jiro', email:'[email protected]'},
        {no:10, name:'Sigeru', email:'[email protected]'},
      ],
      maxNo : 11
    }
  },
  methods: {
    doAdd: function(){
      this.items.push({
        no: this.maxNo, 
        name:'Add User '+this.maxNo, 
        email:'[email protected]'
      });
      this.maxNo = this.maxNo + 1;
    },
    doRemove: function(index){
      this.items.splice(index, 1);
    }
  }
}
Vue.createApp(App).mount('#app');

サンプル

今回のソースを実際に触って確認できるようにデモを用意しました。

See the Pen
Vue.jsを使ってTableをカスタマイズしていく（データの追加・削除） by カバの樹 (@kabanoki)
on CodePen.0

データの追加

step
1追加するボタンを設置する

まず追加するために、ユーザーが使用するボタンを設置します。
クリックイベントで doAdd というイベントを設定します。

<button @click="doAdd">追加</button>

step
2イベントの設定

Step１で作ったボタンをクリックした時に起動するイベントを設定します。

const App = {
  ...
  methods: {
    doAdd: function(){}
  }
}

次にイベントの処理で, items の配列にデータを追加します。
今回はnoのカウントアップを、maxNo を利用することで行います。

 
const App = {
  data() {
    return {
      ...
      items:[ 
        {no:1, name:'Daiki', email:'[email protected]'}, 
        {no:2, name:'Naoki', email:'[email protected]'}, 
        {no:3, name:'Yuki', email:'[email protected]'},
        ...
    ],
    maxNo : 11
  },
  methods: { 
    doAdd: function(){
      this.items.push({ 
        no: this.maxNo, 
        name:'Add User '+this.maxNo, 
        email:'[email protected]' 
      }); 
      this.maxNo = this.maxNo + 1;
    } 
  }
}

データを削除

step
1削除するボタンを設置する

まず削除するために、ユーザーが使用するボタンを設置します。
クリックイベントで doRemoveというイベントを設定し、行の index 数を渡します。

<button @click="doRemove(index)">削除</button>

step
2イベントの設定

Step１で作ったボタンをクリックした時に起動するイベントを設定します。

const App = {
  ...
  methods: {
    doRemove: function(index){}
  }
}

次にイベントの処理で, items の配列からデータを削除します。
splice で配列のindex番目を削除します。

 
const App = {
  ...
  methods: { 
    doRemove: function(index){
      this.items.splice(index, 1);
    } 
  }
}

さいごに

次回は transition-group を使って、データの追加や削除をする時にアニメーションを設定していきます。

その他のまとめは下記よりご覧ください。