Level 51
I'm using Vue's dynamic components to render which form element type needs to be rendered based on what comes from the DB.
Aug 13, 2020
6
Level 51
Vue radio buttons problem
Hi all,
I have the following:
<label class="label-control">{{ question.label }}</label>
<div v-for="(option, index) in question.options" :key="index">
<div class="custom-control custom-radio">
<input class="custom-control-input"
type="radio"
:id="question.id"
:name="'question_' + question.id"
:key="index"
:value="option"
v-model="selected[index]"
>
<label class="custom-control-label" :for="question.id">
{{ option }}
</label>
</div>
</div>
Which produces
Each question as different answers, but I'm not sure the above code is correct, as I can only select one option and doesn't change when I try select something else.
I also don't know how to store the question and answer into an array so I can send it to my Laravel backend to save this. Any help greatly appreciated.
Level 51
Anyone know the answer please?
Level 28
The variable passed to v-model should be the same for all the radio group. Your passing a different variable based on the index, which is wrong and causes your unexpected results.
Level 51
@piljac1 Yes I changed that to be just v-model="selected" but still I can only select the first one, it doesn't allow me to select the 2nd or any other option for that matter.
Here's an updated version:
<input class="custom-control-input"
type="radio"
:id="'question_' + question.id"
:name="option"
:value="option"
v-model="selected"
@change="update($event)"
>
<label class="custom-control-label" :for="'question_' + question.id">
{{ option }}
</label>
Level 28
Can you post more code :
-
Parent component where the component you posted is used
-
The entire component you posted, including the script section
Level 51
Yes you were right, needed to be the same name, all good now thank you.
Please or to participate in this conversation.