如何为包含多个使用单选输入类型的问题的表单编写 html？

Question

我有多项选择题的测验，用户可以 select 每个问题一个选项，最后提交他们的答案。这个例子展示了我正在努力实现的目标：[示例代码 w3school][1]

我遇到的问题是 select 在一个问题上选择一个选项去 select 任何以前的 selection，这意味着只有一个选项可以是 select完成了整个测验。

这是我的表单模板的一部分：

<form @submit.prevent="submit">
<div v-for="question in questions" :key="question.id">
 <jet-label :for="question.question" :value="question.question" class="font-bold text-lg" />
     <div v-for="option in question.options" :key="option.id">
        <jet-label :for="option.option" :value="option.option" />
        <input :id="option.id" type="radio" :value="option.option" 
        :name="option.question_id" v-model="form.options" />
     </div>
</div>
<div class="flex items-center justify-end mt-4">
    <jet-button class="ml-4" :class="{ 'opacity-25': form.processing }" 
     :disabled="form.processing">
       Submit
     </jet-button>
</div>
</form>

这是处理用户select离子绑定的JS：

<script setup>
...
import { useForm } from '@inertiajs/inertia-vue3'

defineProps({
    questions: Array
})

const form = useForm({
    options: []
})

...
</script>

问题可能是输入被视为属于一个组。如何根据问题 ID 对输入进行分组，以便每个问题都执行 select/deselect 单选操作？ [1]: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_radio

Answer 1

v-model="form.options" 似乎是问题所在，所有输入都具有相同的模型。每次选择收音机时，它都会用选项值覆盖 this.options。

尝试：

v-model="form.options[option.question_id]"

如果这不起作用，请尝试使用 @change

添加自定义事件处理程序

顺便说一句：option.question_id 是一个奇怪的数据结构，最好在问题对象中包含 id，因为选项似乎位于问题对象中的数组中

如何为包含多个使用单选输入类型的问题的表单编写 html？

How do I write html for form with multiple questions that use radio input type?

html

javascript

radio-button

vuejs3