如何将Quasar q-checkbox多选答案存入二维数组？

核心问题分析 #

你遇到的问题是因为未正确初始化多选问题对应的答案存储为数组，Quasar的q-checkbox在绑定非数组类型的v-model时，会默认将值设为true/false而非收集选中项。同时用数组直接按字符串ID索引会导致响应式异常，建议改用对象存储答案，再按需转换为目标数组结构。

步骤1：修改answers为响应式对象 #

将原数组类型的answers改为对象，更适合按问题ID映射存储答案：

const answers = ref({})

步骤2：初始化答案存储 #

在获取到问题列表后，遍历初始化每个问题的答案容器，多选问题需初始化为空数组：

// 假设questions是你的问题数据数组
questions.value.forEach(question => {
  if (question.type === 'multi-select') {
    // 多选问题初始化空数组，用于收集选中项
    answers.value[question.id] = []
  } else {
    // 其他类型问题（如单选、输入框）初始化对应默认值
    answers.value[question.id] = ''
  }
})

步骤3：修正模板中的q-checkbox绑定 #

保持原有模板结构，q-checkbox会自动将选中的:val值存入绑定的数组，取消勾选时自动移除：

<div v-if="questionObject.type == 'multi-select'" class="items-center">
    <div class="text-h6">{{ questionObject.question }}</div>
    <div v-for="(option, index) in questionObject.possibleAnswers" :key="index">
        <q-checkbox 
          v-model="answers[questionObject.id]" 
          :val="option" 
          :label="option" 
          color="red"
        />
    </div>
 </div>

步骤4：转换为目标数组结构（可选） #

如果最终需要[question1Answer, question2Answer, [question3Answer1, ...]]的数组结构，只需按问题顺序映射即可：

// 按问题顺序提取答案，生成目标数组
const finalAnswers = questions.value.map(q => answers.value[q.id])

为什么之前的watch方案失败？ #

手动用watch同步数组时，容易忽略q-checkbox的选中/取消逻辑细节（如重复项、顺序问题），而Quasar的q-checkbox已经内置了数组类型v-model的自动维护逻辑，无需手动处理。

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