vue js - 默认情况下，单选按钮不会检查 v-model 属性

【问题标题】：vue js - radio button won't check by default with v-model attributevue js - 默认情况下，单选按钮不会检查 v-model 属性
【发布时间】：2016-08-28 16:53:59
【问题描述】：

如果我删除 v-model 属性，checked 将起作用。

<input type="radio" name="sign" value="+" v-model="sumType" checked="checked"> Addition
<input type="radio" name="sign" value="-" v-model="sumType"> Subtraction

如何默认选中具有 vue js 模型属性的单选按钮？

【问题讨论】：

标签： javascript radio-button vue.js checked

【解决方案1】：

只需将v-model 属性设置为您要默认检查的收音机的值。

例如：

export default {
  data () {
    return {
      sumType: '-'
    }
  }
}

将在页面加载时选择 Subtraction 收音机。

使用以下 HTML（具有上述组件结构）有效：

<input type="radio" name="sign" value="+" v-model="sumType"> Addition
<input type="radio" name="sign" value="-" v-model="sumType"> Subtraction

【讨论】：

【解决方案2】：

sumType 模型的值会覆盖您的 checked 属性。

可能，你想指定绑定值（v-bind:value=""）：

<input type="radio" name="sign" value="+" v-bind:value="+" v-model="sumType"> Addition
<input type="radio" name="sign" value="-" v-bind:value="-" v-model="sumType"> Subtraction

【讨论】：

可能，'+' 应该用字符串包裹，v-bind:value=" '+' " 而只是 v-bind:value="+"