Vue组件循环渲染时Prop异常：始终获取首个section的ID

核心问题排查与修复 #

1. 给v-for绑定唯一key #

Vue渲染列表时，若未指定唯一key会复用组件实例，导致状态混乱，这是最常见的诱因。

修改父组件的v-for代码，绑定section的唯一ID作为key，禁止使用index：

<TopicSection 
  v-for="section in loadObject.sections" 
  :key="section.id"  <!-- 绑定section的唯一标识，而非循环索引 -->
  :section="section"
/>

2. 直接引用最新的prop值 #

检查子组件的onAdd方法，避免将section.id缓存到data变量，直接读取this.section.id：

methods: {
  onAdd() {
    // 直接使用prop中的section.id，不要用提前缓存的变量
    const currentSectionId = this.section.id;
    console.log('当前操作的section ID:', currentSectionId);
    // 后续业务逻辑...
  }
}

如果之前在子组件的data或created钩子中缓存过section.id（比如this.sectionId = this.section.id），这类写法会导致prop更新时缓存值不同步，必须删除缓存逻辑，直接使用this.section.id。

3. 排查事件绑定的this指向 #

若onAdd通过非模板方式绑定事件，要确保方法中的this指向当前子组件实例。避免用箭头函数定义方法，箭头函数会绑定父级作用域的this：

// 错误写法：箭头函数导致this指向父组件
methods: {
  onAdd: () => {
    console.log(this.section.id); // this不是子组件实例
  }
}

// 正确写法：普通函数
methods: {
  onAdd() {
    console.log(this.section.id);
  }
}

验证 #

修改后刷新页面，通过Vue DevTools确认每个TopicSection实例的section prop正确，再点击不同组件的触发按钮，此时onAdd方法中应该能获取到对应section的ID。

内容的提问来源于stack exchange，提问作者T.J. Mahaffey