Vue3中如何在子组件方法中获取v-for列表的item id

下面提供几种实用方案，无需复杂改动即可实现需求：

方法1：箭头函数绑定参数（最推荐） #

在绑定@onSave事件时，用箭头函数直接把当前循环的item.id或index传递给父组件的onSave方法，完全不需要修改子组件：

修改模板代码： #

<div v-for="(item,index) of items" :key="index">
 <span>{{ item.id }}</span>
 <Component 
   v-model="item.text" 
   :componentId="generateRandomString()" 
   @onSave="() => onSave(item.id, index)"
 />
</div>

父组件onSave方法更新： #

async onSave(itemId, index) {
  // 直接拿到目标item的ID和索引，执行更新逻辑
  try {
    await apiService.updateItem(itemId, { text: this.items[index].text });
    // 可添加保存成功后的提示或状态更新
  } catch(e) {
    console.error('保存失败:', e);
  }
}

方法2：子组件传递ID（需修改子组件） #

如果允许修改子组件代码，可以给子组件添加一个接收itemId的Prop，触发onSave时把ID作为参数emit出去：

父组件模板绑定Prop： #

<div v-for="(item,index) of items" :key="index">
 <span>{{ item.id }}</span>
 <Component 
   v-model="item.text" 
   :componentId="generateRandomString()" 
   :item-id="item.id"
   @onSave="onSave"
 />
</div>

子组件内部修改触发逻辑： #

// 子组件代码（示例）
export default {
  props: ['itemId', 'value'], // 假设v-model绑定的是value
  methods: {
    onSave() {
      // 触发事件时携带itemId
      this.$emit('onSave', this.itemId);
      // 同时触发v-model的update事件
      this.$emit('input', this.value);
    }
  }
}

父组件onSave方法接收参数： #

async onSave(itemId) {
  // 通过ID找到对应的item
  const targetItem = this.items.find(item => item.id === itemId);
  if (targetItem) {
    try {
      await apiService.updateItem(itemId, { text: targetItem.text });
    } catch(e) {
      console.error('保存失败:', e);
    }
  }
}

方法3：动态Ref结合索引（应急方案） #

给每个子组件设置动态Ref，通过索引关联到对应的item。这种方法依赖列表索引，当列表排序、新增/删除条目时容易出问题，仅作应急使用：

修改模板代码： #

<div v-for="(item,index) of items" :key="index">
 <span>{{ item.id }}</span>
 <Component 
   v-model="item.text" 
   :componentId="generateRandomString()" 
   :ref="`component-${index}`"
   @onSave="() => onSave(index)"
 />
</div>

父组件onSave方法： #

async onSave(index) {
  const targetItem = this.items[index];
  if (targetItem) {
    try {
      await apiService.updateItem(targetItem.id, { text: targetItem.text });
    } catch(e) {
      console.error('保存失败:', e);
    }
  }
}

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