Привязка переключателей не работает в VueJS - PullRequest
Новая
       2

Привязка переключателей не работает в VueJS

0 голосов
/ 21 апреля 2020

Они просто не работают.

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 также не работает.

1 Ответ

1 голос
/ 21 апреля 2020

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