VueJS：v-for具有動態組件奇怪的行為

Question

我的組件之一具有以下語法：

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

列表在第一時間正確呈現。

但是，當我使用events.unshift（event）向事件數組中添加新元素時，會發生奇怪的行為：使用索引為n +的事件的某些屬性來呈現索引為n的事件的event-item組件。 1 。

如果我使用events.push（event） ，也不會發生此行為，但是使用它不是一種選擇，因為我需要在列表的開頭插入新事件。

Answer 1

發生這種情況，因為的key ，你正在使用和事實，你是unshift ING項目從數組中。 由於已使用該密鑰，因此該組件不會重新呈現。

您有2個選擇：

1. 更改密鑰，使其包含事件ID（我建議使用此方法）。 您可以使用Guid之類的東西生成ID。
2. 清除陣列並重新構建（浪費的IMO）

我個人在項目中有一個uuid包，但是您可以執行以下操作：

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

然后在組件v-for循環中:key="event.id"