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:'daiki@hoge.net'},
        {no:2, name:'Naoki', email:'naoki@hoge.net'},
        {no:3, name:'Yuki', email:'yuki@hoge.net'},
        {no:4, name:'Aoi', email:'aoi@hoge.net'},
        {no:5, name:'Hnako', email:'hanako@hoge.net'},
        {no:6, name:'Momo', email:'momo@hoge.net'},
        {no:7, name:'Taro', email:'taro@hoge.net'}, 
        {no:8, name:'Shiori', email:'siori@hoge.net'},
        {no:9, name:'Jiro', email:'jiro@hoge.net'},
        {no:10, name:'Sigeru', email:'sigeru@hoge.net'},
      ],
      maxNo : 11
    }
  },
  methods: {
    doAdd: function(){
      this.items.push({
        no: this.maxNo, 
        name:'Add User '+this.maxNo, 
        email:'adduser@hoge.net'
      });
      this.maxNo = this.maxNo + 1;
    },
    doRemove: function(index){
      this.items.splice(index, 1);
    }
  }
}
Vue.createApp(App).mount('#app');

サンプル

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

データの追加

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:'daiki@hoge.net'}, 
        {no:2, name:'Naoki', email:'naoki@hoge.net'}, 
        {no:3, name:'Yuki', email:'yuki@hoge.net'},
        ...
    ],
    maxNo : 11
  },
  methods: { 
    doAdd: function(){
      this.items.push({ 
        no: this.maxNo, 
        name:'Add User '+this.maxNo, 
        email:'adduser@hoge.net' 
      }); 
      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 を使って、データの追加や削除をする時にアニメーションを設定していきます。

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