未使用 v-model 检查 vue 输入单选

Posted 2023-03-27

【中文标题】未使用 v-model 检查 vue 输入单选

【英文标题】：vue input radio not checked with v-model

【发布时间】：2018-06-29 18:44:23

【问题描述】：

当我使用: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

【参考方案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>