Удалить элемент из вычисленного списка в Vue.js

Question

Мне нужно будет отобразить список элементов и уметь стирать один из них при необходимости.

<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 (key) { 
    this.todoList = this.todoList.filter(todo => todo.key !== key) 
}