Vue列表删除组件异常：始终删除最后一个元素而非指定索引项

Hey there! I’ve run into this exact frustrating issue with Vue 2 before, so I totally get how confusing it is when your delete action keeps targeting the last item instead of the one you clicked. Let’s walk through the most common fixes based on your tech stack (Vue 2.5.16, Laravel Mix 0.x):

1. Fix the v-for key Attribute (Most Likely Culprit) #

Vue 2 uses an "in-place patch" strategy for v-for when it doesn’t have a proper unique key. This means it reuses existing components instead of re-rendering them correctly, which makes it look like you’re deleting the last item even when you’re targeting a different index.

What to do:

• Never use the loop index as your key (it changes when items are added/removed, defeating the purpose)
• Always bind a unique, stable identifier from your item (like an id field) as the key

Example of the fix in your parent component:

<!-- Bad: Uses index as key or no key at all -->
<custom-item v-for="(item, index) in items" :index="index" @delete="deleteItem(index)"></custom-item>

<!-- Good: Uses unique item ID as key -->
<custom-item v-for="item in items" :key="item.id" :item="item" @delete="deleteItem(item)"></custom-item>

2. Avoid Stale Index References in Event Handling #

If you’re passing the loop index to your delete method, that index can become stale if components are reused (thanks to Vue’s in-place reuse). Instead, pass the actual item object to your delete handler, then filter it out by its unique ID.

Updated delete method in parent component:

methods: {
  deleteItem(targetItem) {
    // Filter out the item by its unique ID instead of relying on index
    this.items = this.items.filter(item => item.id !== targetItem.id);
  }
}

In your custom component, emit the item instead of the index:

<template>
  <div>
    {{ item.name }} <!-- Bind directly to the prop instead of local state -->
    <button @click="$emit('delete', item)">Delete</button>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  }
}
</script>

3. Ensure Your Component Doesn’t Use Local State Instead of Props #

If your custom component is copying the item into its own data instead of using the prop directly, the component won’t update when the parent’s list changes. Always bind directly to the prop for display and pass the original item back in events.

Quick Laravel Mix Tip #

Since you’re using Laravel Mix 0.x, sometimes cached compiled assets can cause old code to stick around. If you’ve made the fixes above and still see issues, try:

• Running npm run watch-poll instead of watch to ensure changes are picked up
• Clearing your browser cache and the Mix cache (delete the public/js folder temporarily and recompile)

These steps should resolve the "deletes last item" issue 9 times out of 10 with Vue 2’s v-for and custom components.

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