Vue动态删除组件异常：点击删除首个组件却移除了最后一个

你遇到的问题是Vue的v-for使用数组索引作为key导致的组件复用错误。

当用索引i作为v-for的key时，删除第一个元素后，数组的索引会重新排列：原索引1的元素变为新索引0，原索引2的变为新索引1。Vue为了性能优化，会复用已有的组件实例，而不是重新创建。这就导致原本属于原索引1的AddImageComponent（对应鸟的图片）被复用给了新索引0的文本B，原索引2的组件（蛇的图片）被复用给新索引1的文本C，而原索引0的组件（狗的图片）被移除——最终出现文本和图片不匹配的现象。

解决这个问题需要两步：

• 给列表项添加唯一标识符，用该标识符作为v-for的key，让Vue能精准识别每个列表项的身份。
• 将AddImageComponent的图片状态与对应列表项的数据绑定，而非让组件内部独立维护状态。

修改后的代码示例 #

App.vue #

<template>
  <div>
    <!-- 使用唯一id作为key，而非索引 -->
    <div v-for="line in lines" class="line-wrapper" :key="line.id">
      <!-- 通过v-model将图片状态绑定到line的image属性 -->
      <AddImageComponent
        class="add-image"
        matchType="image.*"
        selectButtonText="SELECT OR DROP AN IMAGE"
        v-model="line.image"
      />

      <input type="text" v-model="line.text" />

      <div class="delete-button" @click.stop="deleteLine(line.id)">
        Delete
      </div>
    </div>
  </div>
</template>

<script>
import AddImageComponent from "./AddImageComponent.vue";
export default {
  name: "App",
  components: {
    AddImageComponent,
  },

  data() {
    return {
      // 给每个列表项添加唯一id，并新增image字段存储图片数据
      lines: [
        { id: 1, text: "A", image: null },
        { id: 2, text: "B", image: null },
        { id: 3, text: "C", image: null },
      ],
    };
  },
  methods: {
    // 通过id删除对应列表项，比用索引更可靠
    deleteLine(lineId) {
      this.lines = this.lines.filter(line => line.id !== lineId);
    },
  },
};
</script>

<style>
#app {
  background-color: darkcyan;
  height: 100vh;
}

.add-image {
  background-color: lime !important;
  height: 50%;
}

.line-wrapper {
  background-color: purple;
  border: 2px solid black;
  margin-top: 2em;
}

.delete-button {
  background-color: red;
  padding: 5px;
  max-width: 50%;
  border-radius: 10px;
  border: 2px solid red;
}

.delete-button:hover {
  cursor: pointer;
  background-color: transparent;
  border: 2px solid red;
  color: white;
}

input {
  margin: 10px;
  background-color: yellow;
  padding: 5px;
  border-radius: 10px;
  border: none;
}
</style>

AddImageComponent.vue（需适配v-model） #

需要修改子组件支持v-model，将图片数据通过modelValue prop接收，并在图片变化时触发update:modelValue事件：

<template>
  <div>
    <input
      type="file"
      accept="image/*"
      @change="handleImageChange"
    />
    <button>{{ selectButtonText }}</button>
    <img v-if="modelValue" :src="modelValue" alt="Selected image" />
  </div>
</template>

<script>
export default {
  name: "AddImageComponent",
  props: {
    matchType: String,
    selectButtonText: String,
    modelValue: [String, File], // 接收父组件传递的图片数据
  },
  emits: ["update:modelValue"], // 声明要触发的事件
  methods: {
    handleImageChange(event) {
      const file = event.target.files[0];
      if (file) {
        // 将文件转为DataURL（或根据需求传递File对象）
        const reader = new FileReader();
        reader.onload = (e) => {
          this.$emit("update:modelValue", e.target.result);
        };
        reader.readAsDataURL(file);
      }
    },
  },
};
</script>

1. 唯一key：Vue通过line.id识别每个列表项的唯一性，删除操作时会精准销毁对应项的组件实例，不会复用错误的组件。
2. 状态绑定：将图片状态存储在父组件的lines数组中，而非子组件内部，确保每个列表项的文本和图片数据始终一一对应，组件只是负责渲染和修改对应的数据。

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