Vue3中v-for循环内单选按钮点击后全选中，如何修复？

问题出在所有循环生成的ErtFieldCheckbox组件都绑定了同一个clientAnswer变量，且没有为每个选项指定唯一的选中标识。这就导致任何一个选项被点击时，所有组件都会同步读取clientAnswer的值，最终全部显示为选中状态。

下面是无需单独创建组件的修复方案：

修复后的代码 #

<div class="answers">
  <div class="test2">
    <ErtFieldCheckbox
      v-for="answer in proposedAnswers"
      :key="answer.id"
      v-model="clientAnswer"
      :value="answer.id" <!-- 为每个选项指定唯一值 -->
      :label="answer.text" <!-- 可选：显示选项文本，根据组件prop调整 -->
    />
  </div>
</div>

<script>
import { ref } from 'vue'

let clientAnswer = ref('')
const proposedAnswers = ref([
  {
    id: '1',
    text: 'good',
  },
  {
    id: '2',
    text: 'bad',
  },
  {
    id: '3',
    text: 'else',
  },
])
</script>

关键说明 #

1. 添加唯一value：通过:value="answer.id"给每个选项分配唯一标识，确保组件能区分不同选项；
2. v-model工作逻辑：clientAnswer会自动存储当前选中选项的id值，当点击其他选项时，clientAnswer更新为对应选项的id，未选中的组件因value不匹配会自动取消选中状态；
3. 组件属性适配：如果你的ErtFieldCheckbox组件不使用value作为选项值的prop，替换成组件实际定义的属性名（比如部分UI库用option-value）即可。

特殊情况处理（如果是多选框模拟单选） #

如果ErtFieldCheckbox是多选框组件，但你需要实现单选效果，可以手动控制选中状态：

<ErtFieldCheckbox
  v-for="answer in proposedAnswers"
  :key="answer.id"
  :checked="clientAnswer === answer.id"
  @change="(e) => e.target.checked && (clientAnswer = answer.id)"
  :label="answer.text"
/>

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