Vue.Draggable のリストからアイテムを削除する方法

はじめに

Vue.Draggableは、今非常に注目されているライブラリです。

今回は、Vue.Draggableのリストからアイテムを削除する方法を記事にします。

以前にVue.Draggableの使い方の記事を書きました。

https://www.kabanoki.net/1712/

前日にはリストを追加する方法の記事を書きました。

https://www.kabanoki.net/3591/

環境

vue.js : 2.5.8
Vue.Draggable: 2.20.0

導入手順

[手順1] - computedとmethodsを準備する

Vue.Draggableのリストのアイテムを削除する方法は、通常のリストのアイテムを削除する方法と同じです。

new Vue({
  el: "#app",
  data: {
    items:[
      {no:1, name:'キャベツ', categoryNo:'1'},
      {no:2, name:'ステーキ', categoryNo:'2'},
      {no:3, name:'リンゴ', categoryNo:'3'}
    ]
  },
  computed: {
    myList: {
      get() {
        return this.items;
      },
      set(value) {
        this.items = value;
      }
    }
  },
  methods: {
    doDelete: function(item, index){
      this.items.splice(index, 1);
    },
  }
});

[手順2] - テンプレートを設置

リストの呼び出しをcomputedにしています。
リストにkeyを設定するのは特に重要なポイントです。
keyが設定されていないと並び順がぐちゃぐちゃになってしまいます。

<ul id="app">
 <draggable v-model="myList">
   <li v-for="item, index in myList" :key="item.no">
   {{item.name}}-(No.{{item.no}})
   <span class="del" v-on:click="doDelete(item, index, '')">[削除]</span>
   </li>
 </draggable>
</ul>

デモ

>>専用ページで確認する

まとめ

リストからアイテムを削除するのは意外と簡単でした。

おそらく悩む人も少ない？と思います。

前回のリストにアイテムを追加する記事同様にcomputedを利用すれば非常に簡単にリストを更新することができます。

リストにkeyを設定するのは忘れないでください。
削除する時には特に重要です。

今日はこの辺でー