记一个Vue.js 的for问题

写CMS的时候成员卡片有个上传头像的部分

父组件

<MemberCard
    v-for="memberData in membersData" 
    :key="memberData._id.$oid"
    :id="memberData._id.$oid"
    ...
/>

子组件

const props = defineProps<{
  id: string
  ...
}>()

const uploadAvatar = (event: Event) => {
  console.log(props.id)
  ...
}

<div>
    <input
        id="uploadAvatar"
        type="file"
        @change="uploadAvatar($event)"
    >
    <label for="uploadAvatar" cursor-pointer block shrink-0 mr-2>
        <img :src="props.avatar" alt="Avatar" rounded-2 h-16 w-16>
    </label>
    ...
</div>

在父组件写好之后省事直接剪切到了子组件来for

导致点击之后上传的id一直是for里面的第一个

测试了半天 以为是props异步 并发的问题 尝试了 nextTick, watch 都没用，但是html里面写{{props.id}}却没问题

最后发现是id写死的问题，因为for出来的组件id都是字符串"uploadAvatar"，于是出现了多个id的卡片

点击时因为有多个一样的id，所以浏览器就选取了里面的第一个

于是改成动态绑定之后就修好了

子组件

<div>
    <input
        :id="props.id"
        type="file"
        @change="uploadAvatar($event)"
    >
    <label :for="props.id" cursor-pointer block shrink-0 mr-2>
        <img :src="props.avatar" alt="Avatar" rounded-2 h-16 w-16>
    </label>
    ...
</div>

被自己蠢到了