vue input radio not checked with 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/vue@2.5.13/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>