将 Quasar q-checkbox 答案放入数组中的数组中

Question

我有一个名为答案的数组。我想将不同问题的答案存储在该数组中。我的一种问题类型是 q-checkbox 来选择多个答案。因为可以选择多个答案，所以它们必须存储在数组中。我找不到一种方法来将“多个答案数组”中的值存储在答案数组中。

它应该看起来像这样： 答案 = [问题 1 答案，问题 2 答案，[问题 3 答案 1，问题 3 答案 2]，...]

我尝试过这样的尝试：

<q-checkbox v-model="answers[questionObject.id]" :val="multiSelectAnswers" :label="multiSelectAnswers" color="red"/>

但这不起作用。 “answers[questionObject.id]”只是在答案数组中插入 true 或 false。

我还尝试将具有唯一 ID 的多选答案存储在不同的数组中，并使用监视函数将它们传输到主数组中。但这样做的问题是“取消勾选”选项并没有将它们从数组中删除。

这是问题类型多重选择的完整差异：

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

我用以下方法创建了答案数组：

    const answers = ref([])

这是单个问题的存储方式： { “id”：“1”， "type": "多选", “问题”：“xyz？”， “可能的答案”：[ “X”， “是”， “z” ], “最小选择”：0， “最大选择”：0 },

如果有人找到解决这个问题的方法，我将非常感激。非常感谢！

Answer 1

您正在尝试创建一个嵌套数组。 v-model 需要绑定到嵌套数组索引

<q-checkbox
  v-model="answers[questionObject.id][index]"
  :val="multiSelectAnswers"
  :label="multiSelectAnswers"
  color="red"
/>

嵌套数组也需要初始化，这样上面的代码就不会出错。

const answers = ref([]);
answers.value[questionObject.value.id] = [];