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-model，我可以编辑优先级。我可以注意到编辑。但我希望能够删除任何项目。它不会触发任何错误或警告（vue.js文件未缩小）。

我试过Vue.delete(todo_list, index)，我尝试传递密钥而不是索引，在方法中执行。这些都没有效果。注意：当我尝试使用该方法时，我输入了它：我可以在splice之前和之后登录控制台。

我可以在数据中创建一个镜像该计算值的属性，但我相信这将是无用的代码。有没有办法实现这个目标？

Answer 1

如果每个待办事项都有唯一的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)
}

在Vue.js中删除计算列表的项目

1 个答案: