如何在vue3底层组件的方法中使用v-for列表中的item id

Question

我有一个 vue 模板，其中包含嵌套在 v-for 列表中的组件。 该组件有一个 onSave 方法，在保存时我想更新后端数据库中的该项目。 我在访问 onSave 函数中的项目 ID 时遇到问题。不幸的是，该组件的 onSave 函数无法接受输入。 有关如何获取该 item.id 或索引的任何指示吗？

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

<script>
  import {Component} from 'component'
  import apiService from '../service/apiService'

  export default {
  data() {
    return {
      items: null
    };
  },
  methods: {
    async loadItems() {
      try {
        const r = await apiService.getItems();
        this.items = r.data;
      }
      catch(e){
        console.log(e);
      }
    },
    onSave() {
      //Here I try to get the item.id or the item.index to find which item I need to update
    },
    generateRandomString() {
      return randomString();
    }
  }
}
</script>

Answer 1

将项目和索引传递给onSave，然后您可以访问项目中的任何属性：

<Component v-model="item.text" :componentId=generateRandomString() @onSave="() => onSave(item, index)"/>

...

    onSave(item, index) {
      //Here I try to get the item.id or the item.index to find which item I need to update
    },