When I use :checked, it works. But if I add v-model, it does not work.
<div v-for="answer in the_data[current].answers" id="answers">
<p>
<input
type="radio"
name="answer"
:id="answer"
:value="answer"
v-model="the_answer"
v-bind:checked="answer == 'girl'"
>
@{{ answer }}
</p>
</div>
I need to use v-model
I believe the reason is the input checked is binded to the_answer and somehow the initial value of the_answer is not one of the picked values, and this binding overwrites the checked attribute, since whatever is checked should be the value the input is binded to, i.e. the_answer. Specifying the initial value of the_answer should give you the same behavior of checked:
new Vue({
el: '#app',
data: {
the_answer: 'girl' // initialize the_answer to be your checked option
}
})<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id='app'>
<div v-for="answer in ['boy', 'girl']">
<p>
<input
type="radio"
name="answer"
:id="answer"
:value="answer"
v-model="the_answer">
@{{ answer }}
</p>
</div>
</div>