Vue动态表单Checkbox绑定异常：勾选单个选项触发全选问题排查

开发从数据库生成的动态表单时，其他字段功能正常，但Checkbox出现异常：勾选单个选项时所有选项都会被选中。使用全新对象作为绑定模型时功能正常，调试发现initialAnswers[11]本该是数组，实际却显示为'true'。

问题项JSON结构 #

{
    "id": 11,
    "question": "Check all coverages that apply:",
    "options": "{\"values\": [\"Group Medical\", \"Dental\", \"Vision\", \"Voluntary Supplemental Life\", \"Voluntary Supplemental Life for Spouse/Dependents\", \"Short-Term Disability\", \"Long-Term Disability\", \"Health FSA\", \"HRA\", \"Wellness Program\", \"AFLAC\", \"MEC (Minimum Essential Coverage) Plan\", \"Dependent Care FSA\", \"HSA\", \"Tobacco Surcharge\"]}",
    "section_id": 10,
    "form_position": 1,
    "type": 1,
    "liability": 0,
    "weight": 0,
    "title": "For a more accurate assessment, please complete this form:",
    "subtitle": "",
    "is_main": 1,
    "section_type": 0
}

对应Vue模板代码 #

<div class="ms-2 ps-5 mb-3" v-for="(question, questionIndex) in initialQuestions[mainKey]" :key="question.id">
    <h5 class="question-title">{{question.question}}</h5>
    <h1>{{question.id}}</h1>
    <div class="row">
        <div class="col-12">
            <div>
                <p>{{'Papa: ' + initialAnswers[question.id]}}</p>
                <div v-if="question.type === 0" v-for="(option, optionIndex) in question.options" class="form-check">
                    <!-- render input -->
                </div>
                <div v-else-if="question.type === 1" v-for="(option, optionIndex) in question.options"  :key="option" class="form-check">
                    <input 
                        class="form-check-input" 
                        type="checkbox" 
                        :id="option" 
                        v-model="initialAnswers[question.id]"
                        :value="option">
                    <label class="form-check-label"
                        :for="option">
                        {{option}}
                    </label>
                </div>
                <div v-else-if="question.type === 2">
                    <!-- render select -->
                </div>
            </div>  
        </div>
    </div>
</div>

模型初始化代码 #

const initialAnswers = ref([])

for (const [key, value] of Object.entries(initialQuestions.value)) {
    console.log(`${key}: ${value}`);
    value.forEach((obj) => {
        switch(obj.type){
            case 0:
                initialAnswers[obj.id] = ref('')
                break;
            case 1:
                initialAnswers[obj.id] = ref([])
                break;
            case 2:
            case 3:
                initialAnswers[obj.id] = ref()
                break;
        }
    })
}

问题原因 #

1. 响应式对象使用错误：initialAnswers被声明为ref([])数组，但直接给数组索引赋值嵌套的ref对象，Vue响应式数组无法正确追踪这种非标准的索引赋值（尤其是索引远大于数组长度时），导致模板中v-model绑定的不是预期的数组值，而是一个ref对象。
2. 多选框绑定逻辑错误：多选框的v-model需要绑定到数组，而这里实际绑定的是ref对象，Vue会将其隐式转换为布尔值。勾选时会把整个绑定值设为true，所有选项都会基于这个true判断为选中状态，因此出现全选的异常。
3. 可选值未正确解析：问题项的options是JSON字符串，未解析为数组的话，v-for遍历的是字符串字符，不过你提到其他功能正常，可能已经处理，但仍需确认是否将其解析为values数组。

解决方案 #

1. 修改initialAnswers为对象类型：因为问题ID是离散数字，用对象键值对存储答案更合理，避免数组索引问题：

   const initialAnswers = ref({})
   

2. 初始化时直接赋值普通值：不需要嵌套ref，直接给对象属性赋值对应类型的初始值：

   for (const [key, value] of Object.entries(initialQuestions.value)) {
       value.forEach((obj) => {
           switch(obj.type){
               case 0:
                   initialAnswers.value[obj.id] = ''
                   break;
               case 1:
                   initialAnswers.value[obj.id] = []
                   break;
               case 2:
               case 3:
                   initialAnswers.value[obj.id] = undefined
                   break;
           }
       })
   }
   

3. 解析options为数组：在处理问题数据时，将JSON字符串解析为可用的选项数组：

   // 示例：处理initialQuestions时解析options
   initialQuestions.value = initialQuestions.value.map(item => {
       if (item.type === 1) {
           item.options = JSON.parse(item.options).values
       }
       return item
   })
   

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