Vue3独立Checkbox组件循环渲染联动异常问题求助

问题出在所有子组件共享了同一个v-model绑定变量，父组件里的newsletter是单个变量，每个ProductCard都绑定它，导致勾选一个时所有复选框同步选中。

修复步骤 #

1. 为每个商品项添加独立的选中状态 #

父组件的数组需要给每个对象添加checked属性，用来存储对应商品的选中状态：

<script setup>
import ProductCard from '@/components/ProductCard.vue'
// 给每个商品项初始化独立的选中状态
const array = [
  { id: 1, checked: false },
  { id: 2, checked: false }
];
</script>

2. 父组件循环时绑定每个项的checked属性 #

把v-model绑定到当前item的checked字段，而非全局变量：

<template>
  <ProductCard 
    v-for="item in array" 
    :key="item.id" 
    :id="item.id"
    v-model="item.checked"
  />
</template>

3. 子组件保持现有逻辑即可 #

你的子组件已经正确实现了v-model双向绑定，无需修改：

<template>
    <div>
        <input :id="id" type="checkbox" :checked="modelValue" 
        @change="$emit('update:modelValue',$event.target.checked)">
    </div>
</template>

<script setup>
defineProps(['id','modelValue'])
</script>

修改后每个复选框会对应自身商品的选中状态，不会再出现联动勾选的问题。

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