我有多项选择格式的测验，用户可以每个问题选择一个选项，并在最后提交答案。此示例显示我正在尝试实现的目标：[示例代码W3SCHOOL] [1]
我遇到的问题是，在问题上选择一个选项会删除任何以前的选择，这意味着整个测验只能选择一个选项。
这是我的表单模板的一部分：
<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>
这是处理用户选择绑定的JS：
<script setup>
...
import { useForm } from '@inertiajs/inertia-vue3'
defineProps({
questions: Array
})
const form = useForm({
options: []
})
...
</script>
问题可能是输入被视为属于一个组。我如何根据问题ID进行分组输入，以使选择/取消无线电操作是每个问题的？
[1]：
I have this quiz in multiple choice format where users can select one option per question and submit their answers at the end. This example shows what I'm trying achieve: [Example code w3school][1]
The problem I'm having is that selecting an option on a question de-selects any previous selection, meaning only one option can be selected for the entire quiz.
This is a section of my form template:
<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>
And this is the JS to handle user selection binding:
<script setup>
...
import { useForm } from '@inertiajs/inertia-vue3'
defineProps({
questions: Array
})
const form = useForm({
options: []
})
...
</script>
The issue probably is that inputs are seen as belonging to one group. How can I group the inputs based on the question id so that the select/deselect radio action is per question?
[1]: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_radio
发布评论
评论（1）
v-model =“ form.options”似乎是问题，所有输入都具有相同的模型。每次选择无线电时，它都会用选项值覆盖
this.options。尝试：
如果不工作，请尝试使用
@changebtw：
option.question_id是一种怪异的数据结构，请更好地比较更好在问题对象中具有ID，因为似乎选项位于问题对象中的数组中v-model="form.options"seems to be the problem, all inputs have the same model.Everytime a radio is selected it overwrites the
this.optionswith the option value.Try:
if that dosen't work try to add a custom event handler with
@changeBTW:
option.question_idis a weird data structure it meight be better to have the id in the question object, because it seems the options lay in an array inside the question object