v-for循环内的Vue.js组件为何始终仅更新列表首个组件？

这个问题我之前也碰到过！核心原因是你循环生成的每个map-itinerary组件里的input都用了同一个id="png"——HTML里id是全局唯一的标识，浏览器碰到重复id时，会默认关联第一个匹配的元素，这就导致不管你点哪个input，最终更新的都是第一个组件的状态。

解决起来很简单，分两步走：

1. 消除重复的input ID（或生成唯一ID） #

如果你的input不需要和<label>标签关联，那直接删掉id="png"就完事了，省得麻烦：

<input accept=".png" @change="fillImage" name="png" type="file">

要是确实需要用id（比如绑定label），那就利用循环里的itinerary.hash（你已经把它作为组件的key了，正好用这个唯一值）来动态生成id：

<input accept=".png" :id="`png-${itinerary.hash}`" @change="fillImage" name="png" type="file">

这样每个组件的input id都是独一无二的，浏览器就不会搞混了。

2. 确认组件状态是独立的 #

还要确保imageFile和imageUrl是定义在map-itinerary组件自己的data里，而不是父组件或者全局变量。每个组件实例都应该有自己独立的状态，这样点击某个组件的input时，只会更新该实例的属性：

// map-itinerary组件的脚本部分
export default {
  props: ['itinerary'],
  data() {
    return {
      imageFile: null,
      imageUrl: ''
    }
  },
  methods: {
    fillImage(event) {
      const el = event.target; // 这里用event.target比srcElement兼容性更好
      this.imageFile = el.files[0];
      this.imageUrl = window.URL.createObjectURL(this.imageFile);
      this.enableUpload();
    },
    enableUpload() {
      // 你的上传启用逻辑
    }
  }
}

另外提个小细节：event.srcElement是IE专属写法，标准浏览器更推荐用event.target，兼容性会更好。

这样修改之后，每个组件的input点击就只会更新自身的状态啦！

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