Question

我的一个组件中有以下语法：

<event-item v-for='(event, index) in events'
            :is='eventComponent(event)'
            :key="'event-' + index"
            :event='event'>
</event-item>

第一时间正确呈现列表。

但是，当我使用 events.unshift（event）向事件数组添加新元素时，会发生奇怪的行为：索引为 n <的事件的事件项组件/ strong>使用索引 n + 1 的事件的某些属性进行渲染。

如果我使用 events.push（event），也不会发生此行为，但使用它不是一个选项，因为我需要在列表的开头插入新事件。

Answer 1

这种情况正在发生，因为你正在使用的是key，而且事实上你是unshift数组中的项目。由于已使用该键，因此组件不会重新渲染。

您有两个选择：

更改密钥，使其包含事件ID（我建议使用此方法）。您可以使用Guid或其他东西生成ID。
清除阵列并重新构建它（浪费IMO）

我个人在我的项目中有一个uuid包，但你可以这样做：

event.id = '_' + Math.random().toString(36).substr(2, 9)

然后在组件v-for循环中：:key="event.id"

VueJS：v-for动态组件奇怪的行为

1 个答案: