在 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">
目前,当我有一个像这样的 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">