Vue循环Vuex数据渲染复选框和单选框时点击单选框导致复选框全取消问题

问题根因 #

你将单选框和复选框的v-model统一绑定到了同一个selected数组上，这是Vue表单绑定的常规误区：

• 复选框绑定数组时，选中/取消操作会在数组中新增/删除对应value
• 单选框的v-model设计为存储单个选中值，点击单选框时，Vue会直接把整个selected数组替换为当前单选框的value字符串，原本存储的复选框选中值自然全部丢失。

修复方案 #

将复选框和单选框的选中值分开存储即可，修改如下：

1. 修改data定义

data () {
  return {
    // 存储所有复选框的选中值
    selectedCheckbox: [],
    // 存储所有单选组的选中值，key为单选组name，value为选中值
    selectedRadio: {},
    isChecked: this.initIsChecked()
  }
},

2. 修改模板绑定

<!-- 复选框部分修改v-model -->
<input v-if="item.type == 'checkbox'" :id="item.id" class="form-checkbox text-green-500 h-6 w-6" v-model="selectedCheckbox" :name="item.name" :type="item.type" v-bind:value="item.value">

<!-- 单选框部分修改v-model，每个单选组独立绑定对应key的值 -->
<input v-if="item.type == 'radio'" :id="item.id+'_finns'" class="form-radio text-green-500 h-6 w-6" v-model="selectedRadio[item.name]" :name="item.name" :type="item.type" v-bind:value="item.value1">

<input v-if="item.type == 'radio'" :id="item.name+'_fattas'" class="form-radio text-green-500 h-6 w-6" v-model="selectedRadio[item.name]" :name="item.name" :type="item.type" v-bind:value="item.value2">

3. 合并获取所有选中值（可选）

如果需要统一获取所有选中的结果，可直接合并两个变量的值：

const allSelected = [...this.selectedCheckbox, ...Object.values(this.selectedRadio)]

附加优化建议：单选框的class之前写的是form-checkbox，建议修改为form-radio，匹配UI组件库的样式规范。

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