在 VueJS 中,v-for 在分配新数据时不会创建离散项

In VueJS, v-for doesn't create discrete items when new data is assigned

目前,当我有一个像这样的 v-for 循环时:

<li v-for="record in records">
    <my-vue-list-item :vue-title="record.title"></my-vue-list-item>
</li>

并且我更新驱动 v-for 的数据(即为 records 分配一个新值),它实际上并没有根据新数据创建新的列表项。它只是更新列表项组件组件上的一些属性。

这里是a JSFiddle illustrating what I'm talking about。尝试展开其中一个按钮(例如单击 "Expand Apple"),然后单击 "Set 2" 以查看即使在列表项切换时组件仍保持展开状态。

避免这种行为的推荐方法是什么?我希望每个新列表项(当数据被换出时)都像新的一样。 (在 fiddle 示例中,我加载了一个新集合,它不应该已经展开。)

您需要让 Vue 组件知道该项目不同。据他们所知,他们仍在从同一个列表中呈现相同的元素索引。

您可以通过在 v-for 迭代器中指定 key 来实现...

<li v-for="item in items" :key="item">

https://jsfiddle.net/ahxf44jk/21/