I am facing an issue with VueJS regarding setting the value of an input radio along with v-model. I am confused as to why I am unable to dynamically set a value to an input and use a model to retrieve the user's selection.
Here is a clearer representation in code:
export default {
props: ["question", "currentQuestion"],
data() {
return {
answer: undefined
}
},
computed: {
isCurrent() {
return this.currentQuestion && this.currentQuestion.id == this.question.id;
}
},
methods: {
groupName(question) {
return 'question_id_' + question.id
},
inputType(question) {
if (question.question_type_id == 2) return "checkbox";
return "radio";
}
},
mounted() {
console.log('Component mounted.')
}
}<template>
<ul v-if="question.question_type_id != 4">
<li v-for="option in question.options" :key="option.id">
<div class="form-group">
<label>
<input v-model="answer" :value="option.id" :type="inputType(question)"
:name="groupName(question)" />
{{option.option}}
</label>
</div>
</li>
</ul>
</template>Therefore, if there are four options, the user would see four radio buttons, each with the "option.id" as a value. When the user clicks a radio button, the model "answer" should be populated with that value.
However, upon compiling the file, I encounter the following error message:
- :value="option.id" conflicts with v-model on the same element because the latter already expands to a value binding internally
Can someone assist me in understanding how to dynamically set a value to an input and associate a model to retrieve the selected value?
Additionally, the VueJS documentation on this page outlines exactly what I am attempting to achieve: https://v2.vuejs.org/v2/guide/forms.html
https://i.sstatic.net/JmxJ7.png
Your help is greatly appreciated.