我在使用复选框作为单独的组件时遇到了一些问题.我只有一个简单的子组件，其中包含带有一些数据的卡模板和一个复选框，如产品列表，每个产品卡应该有一个复选框，一旦 Select ，用户应该能够删除它.现在我编写代码的方式取决于我循环遍历它并显示卡片的数组中有多少项，但如果我选中一个复选框，第二个复选框也会被选中，即使我在呈现时为输入提供了一个单独的ID.任何地方都找不到合适的解决方案，所以如果有任何帮助，我将不胜感激！这是子组件:ProductCard.vue
<template>
<div>
<input :id="id" type="checkbox" :checked="modelValue"
@change="$emit('update:modelValue',$event.target.checked)">
</div>
</template>
<script setup>
defineProps(['id','modelValue'])
</script>
这是父组件:
<template>
<ProductCard v-for="item in array" :key="item.id" v-model="newsletter"/>
</template>
<script setup>
import ProductCard from '@/components/ProductCard.vue'
const array = [{},{}];
</script>
提前感谢！