vue.js - vue 输入 radio 未使用 v-model 检查

Question

当我使用 :checked 时，它起作用了。但是，如果我添加 v-model，它就不起作用。

<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>

我需要使用v-model

Answer 1

我相信原因是 input 被检查绑定(bind)到 the_answer 并且不知何故 the_answer 的初始值不是选择的值之一，并且此绑定(bind)会覆盖 checked 属性，因为检查的内容应该是输入绑定(bind)到的值，即 the_answer。指定 the_answer 的初始值应该给你相同的检查行为:

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>