Vue.jsで計算されたリストのアイテムを削除する

Question

アイテムのリストを表示し、必要なときにそのアイテムの1つを消去する必要があります。

<tr v-for="(todo, key, index) in todo_list"> 
    <td><input v-model.trim="todo.priority" type="number"/></td> 
    <td><a v-on:click="todo_list.splice(index, 1)">Delete</a></td> 
    </tr> 

ここで問題となるのは、todo_listが計算されることです。 vモデルのおかげで、私は優先度を編集することができます。私はその編集に気付くことができます。しかし、私はどの項目も削除できるようにしたい。エラーや警告は発生しません（vue.jsファイルは非圧縮）。

私はVue.delete(todo_list, index)を試しましたが、私はインデックスの代わりにキーを渡して、メソッドでそれをやろうとしました。それのどれも働かなかった。注：私はメソッドを試したとき、私はそれを入力しました：私はspliceの前後にコンソールにログインすることができます。

計算された値を反映するデータ内に属性を作成できますが、無駄なコードになると思います。それを達成する方法はありますか？

Answer 1

それぞれのToDoに固有のkeyがある場合は、これらのキーを使用して元のデータから削除してください。

TODO：

{ 
    key: 0, 
    priority: 5, 
    ... 
} 

例：http://codepen.io/CodinCat/pen/LxjLoE?editors=1010

v-on:click="() => remove(todo.key)" 

とremoveメソッド：

remove (key) { 
    this.todoList = this.todoList.filter(todo => todo.key !== key) 
}