单选按钮绑定在 VueJS 中不起作用答案

【问题标题】：Radio buttons binding doesn't work in VueJS单选按钮绑定在 VueJS 中不起作用
【发布时间】：2020-08-04 08:05:30
【问题描述】：

它们根本不起作用。

<div id="app">
  <p>
  Foo is: {{foo}} <a href="#" v-on:click="click">increment</a>
  </p>

  <div class="row mb-4">
                    <div class="col col-6">foo</div>
                    <div class="col col-6">
                        <div class="btn-group btn-group-toggle" data-toggle="buttons">
                            <label class="btn btn-light">
                                <input type="radio" name="bar" id="bar_0" value="0" v:model="bar"> None
                            </label>
                            <label class="btn btn-light">
                                <input type="radio" name="bar" id="bar_1" value="1" v:model="bar"> Direct
                            </label>
                            <label class="btn btn-light">
                                <input type="radio" name="bar" id="bar_2" value="2" v:model="bar"> Inherit
                            </label>
                        </div>
                    </div>
                </div>
</div>

new Vue({
  el: "#app",
  data: {
    foo: 1
  },
  methods: {
    click: function()
    {
        this.foo = this.foo === 2 ? 0 : this.foo + 1;
    }
  }
})

使用v-bind:value 也不起作用。

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

v-model 是具有此语法v-model="someData" 的指令，您应该将: 替换为连字符-：

  <input type="radio" name="bar" id="bar_0" value="0" v-model="bar">

并将bar 属性添加到数据对象，如下所示：


new Vue({
  el: "#app",
  data(){
  return {
    foo: 1,
   bar:1
  } 
 },
  methods: {
    click: function()
    {
        this.foo = this.foo === 2 ? 0 : this.foo + 1;
    }
  }
})

【讨论】：