Vue3中如何通过v-model获取按问题分组的API多复选框动态值

问题说明 #

我是Vue新手，从API获取题目数据后循环渲染题目，每个题目下再渲染对应的复选框选项。目前勾选后，选中的选项ID会被放到一个平数组里，但我需要按题目ID分组存储，每个题目对应自己的选中选项数组。

现有代码 #

HTML模板 #

<div v-for="(item, index) in data.slice(12, 15)" :key="index" class="mb-80">
  <label
    for="formGroupExampleInput2"
    class="form-label text-bold checkbox-custom-head"
    >{{ item?.id }}. {{ item?.question }}</label
  >
  <div
    v-for="(option, key) in item?.option"
    :key="key"
    class="checkbox-custom-div"
  >
    <input
      :id="`checkbox-${option?.id}`"
      v-model="formData.option_id"
      :value="option?.id"
      class="checkbox-custom"
      type="checkbox"
      @change="handleChange(item?.id)"
    />
    <label :for="`checkbox-${option?.id}`" class="checkbox-custom-label">{{
      option?.option
    }}</label>
  </div>
</div>

脚本代码 #

const formData = reactive({
  option_id: [],
  question_id: '',
  cookie_id: '',
  user_id: '',
})

当前输出 #

所有选中的选项ID被合并到一个数组：

[1, 2, 3, 9, 10, 11 ...]

期望输出 #

按题目ID分组的结构（注：实际应为对象，数组无法支持非连续索引作为键）：

{
  12: [1, 2, 3],
  13: [9, 10, 11],
  // ...其他题目ID对应数组
}

解决方案 #

1. 修改数据结构 #

把formData.option_id从数组改成对象，用来存储每个题目ID对应的选中选项数组：

const formData = reactive({
  option_id: {}, // 键为题目ID，值为选中选项ID数组
  question_id: '',
  cookie_id: '',
  user_id: '',
})

2. 初始化题目对应的选中数组 #

在获取API数据后，为每个要渲染的题目初始化一个空数组，避免第一次勾选时报错：

// 假设你是在onMounted中获取数据
onMounted(async () => {
  // 替换成你的API请求逻辑
  const response = await fetch('/api/questions')
  const fetchedData = await response.json()
  data.value = fetchedData

  // 为要渲染的题目（12-15索引）初始化选中数组
  data.value.slice(12, 15).forEach(item => {
    formData.option_id[item.id] = []
  })
})

3. 修改复选框的v-model绑定 #

将每个题目下的复选框，绑定到对应题目ID的数组上：

<input
  :id="`checkbox-${option?.id}`"
  v-model="formData.option_id[item.id]" <!-- 绑定到当前题目对应的数组 -->
  :value="option?.id"
  class="checkbox-custom"
  type="checkbox"
  <!-- 可以移除@change，v-model会自动处理选中状态 -->
/>

4. （可选）如果确实需要数组结构 #

如果业务要求必须返回数组形式（不推荐，因为数组索引应为连续数字），可以在提交数据前转换结构：

const submitData = () => {
  // 将对象转换为数组，题目ID作为索引
  const optionArray = []
  Object.keys(formData.option_id).forEach(questionId => {
    optionArray[questionId] = formData.option_id[questionId]
  })
  // 提交optionArray或合并到formData中
}

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