VueJS中v-for结合动态组件出现异常行为的问题

Hey there! I’ve run into this exact problem before—let’s break down what’s going wrong and how to fix it.

The Root Cause #

Your current key uses the array index: :key="'event-' + index". Here’s why this breaks when using unshift:

• When you add an item to the start of the array, every existing item’s index gets incremented by 1.
• Vue relies on the key to track which component maps to which array item. If the key is tied to the index, Vue will reuse existing components but assign them to the wrong data (e.g., the component that used to render index 0 now gets paired with index 1’s event).
• This causes partial property mismatches because Vue thinks it’s updating the same component instead of creating a new one for the new item and reordering existing components correctly.
• push works fine because it adds items to the end—existing indices stay the same, so keys and components stay matched properly.

The Fix: Use a Unique, Stable Key #

The solution is to tie each component to a unique identifier from your event object instead of the index. This way, every component is linked directly to its data, no matter where it sits in the array.

Example 1: If your events have a built-in unique id (ideal)

<event-item 
  v-for='(event, index) in events' 
  :is='eventComponent(event)' 
  :key="event.id"  <!-- Use the event's unique ID here -->
  :event='event'>
</event-item>

Example 2: If no unique ID exists, generate one

If your events don’t have a native unique identifier, add one when creating the event (using a timestamp + random string, or a UUID tool):

// When creating a new event to unshift
const newEvent = {
  // ... your event data
  id: Date.now() + Math.random().toString(36).substr(2, 9) // Unique, one-time ID
}
events.unshift(newEvent)

Then use this generated id as the key, just like in Example 1.

Bonus Check: Ensure Your Component Reacts to Prop Changes #

If you still see odd behavior after fixing the key, double-check your event-item component:

• Make sure it properly reacts to changes in the event prop. Use a deep watcher if needed to trigger updates when nested properties change:

// Inside your event-item component
watch: {
  event: {
    deep: true,
    handler(newEvent) {
      // Update local state or computed properties based on the new event data
    }
  }
}

• Avoid caching component state that depends on the event prop without updating it when the prop changes.

内容的提问来源于stack exchange，提问作者felipeecst