在vue中列出一个列表

Question

我有一个名为task的组件，它包含一行与任务相关的表单输入。从GET JSON请求（现有条目）中检索tasks。

<task v-for="task in tasks" :task="task"></task>

现在，我想要一个按钮来添加一个新的空行输入，以便他们可以添加新条目。

<button type="button" @click="addTask()">New</button>

我尝试将空对象卸下来完成任务：

addTask() {
    this.tasks.unshift({});
},

但是，这只是复制了我的任务的最后一行，而不是在任务的开头添加新行。

将项目添加到现有列表的最佳方法是什么？

Answer 1

在组件上使用v-for指令时，需要指定key属性，为每个组件提供唯一的值。否则，Vue将尝试重用元素。

来自documentation：

  

key特殊属性主要用作Vue虚拟DOM算法的提示，以便在针对旧列表区分新节点列表时识别VNode。如果没有密钥，Vue会使用一种算法来最小化元素移动，并尝试尽可能地就地修补/重用相同类型的元素。

在您的情况下，指定密钥的最佳方法是将id属性与每个task相关联，并将其用作关键字：

<task v-for="task in tasks" :task="task" :key="task.id"></task>