未使用 v-model 检查 vue 输入无线电

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检查被绑定到the_answer并且不知何故的初始值the_answer不是选择的值之一，并且此绑定覆盖了checked属性，因为检查的任何内容都应该是输入绑定到的值，即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>