vue input radio not checked with v-model vue input radio not checked with v-model vue.js vue.js

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>