如何使用 Quasar q-checkbox 将答案存储到数组中？

2024-03-13 14:57:55

Quasar q-checkbox 答案存储数组的指南

前言

在 Quasar 框架中，q-checkbox 组件提供了一种收集多选答案的便捷方法。为了有效地处理这些答案，将它们存储到数组中至关重要。本文将详细介绍如何使用 Quasar q-checkbox 组件将答案存储到数组中的步骤和最佳实践。

使用 v-model 指令

第一步是使用 v-model 指令将 q-checkbox 组件的值绑定到一个数组。v-model 指令建立一个双向绑定，允许组件值的变化反映在数组中，反之亦然。

<q-checkbox v-model="answers" :val="answer" :label="answer" color="red"/>

创建数组

接下来，我们需要创建一个数组来存储答案。可以使用 Vue.js 的 ref API 轻松创建可变数组：

const answers = ref([]);

循环生成 q-checkbox

通过 v-for 循环，我们可以动态生成多个 q-checkbox 组件，每个组件都绑定到 answers 数组。

<div v-for="answer in questionObject.possibleAnswers" :key="index">
    <q-checkbox v-model="answers" :val="answer" :label="answer" color="red"/>
</div>

处理选择/取消选择

为了处理选择和取消选择的选项，我们需要一个 JavaScript 方法：

const handleCheckbox = (checked, answer) => {
  if (checked) {
    answers.value.push(answer);
  } else {
    answers.value = answers.value.filter((item) => item !== answer);
  }
};

完整代码示例

以下是一个完整的代码示例，演示了如何使用 q-checkbox 将答案存储到数组中：

<template>
  <div>
    <div v-if="questionObject.type == 'multi-select'" class="items-center">
      <div class="text-h6">{{ questionObject.question }}</div>
      <div v-for="answer in questionObject.possibleAnswers" :key="index">
        <q-checkbox v-model="answers" :val="answer" :label="answer" color="red" @input="handleCheckbox($event, answer)"/>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const answers = ref([]);
    const questionObject = {
      "id": "1",
      "type": "multi-select",
      "question": "xyz?",
      "possibleAnswers": [ "x", "y", "z" ],
      "minSelected": 0,
      "maxSelected": 0
    };

    const handleCheckbox = (checked, answer) => {
      if (checked) {
        answers.value.push(answer);
      } else {
        answers.value = answers.value.filter((item) => item !== answer);
      }
    };

    return {
      answers,
      questionObject,
      handleCheckbox
    };
  }
};
</script>