时间戳

首页 > 解决方案 > 单选按钮绑定在 VueJS 中不起作用

javascript - 单选按钮绑定在 VueJS 中不起作用

问题描述

他们根本不工作。

https://jsfiddle.net/23yf1mqu/1/

<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也不行。

标签： javascriptvue.jsvuejs2vue-component

解决方案

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;
    }
  }
})

推荐阅读