Vuejs 2.0 中的单选按钮

Question

我正在VueJS 2.0 中构建一个小型应用程序，我正在使用 Inspinia 高级管理模板，其中有一个类似这样的单选按钮：

<div data-toggle="buttons" class="btn-group">
    <label class="btn btn-sm btn-white active"> 
        <input type="radio" v-model="taskTime" value="7" name="taskTime"> Week 
    </label>
    <label class="btn btn-sm btn-white"> 
        <input type="radio" v-model="taskTime" value="30" name="taskTime"> Month 
    </label>
</div>

当任何按钮被选中或taskTime 数据发生更改时，我正在调用一个函数，因此为此我已监视函数：

watch: {
    taskTime(newValue) {
        console.log('clicked');

    }
}

我已经在我的数据集中正确定义了 v-model/data

data() {
    return {
        taskTime: ''
    }
},

在我的例子中是 JSFiddle：https://jsfiddle.net/60q14y26/

我不知道它为什么不工作，我猜是有什么东西阻止了它的执行。帮我解决这些问题。

谢谢

Answer 1

<div id="app">
  <div data-toggle="buttons" class="btn-group">
    taskTime {{ taskTime }}
    <label class="btn btn-sm btn-white active"> 
        <input type="radio" v-model="taskTime" value="7"  name="taskTime"> Week 
    </label>
    <label class="btn btn-sm btn-white"> 
        <input type="radio" v-model="taskTime" value="30" name="taskTime"> Month 
    </label>
  </div>
</div>

var vm = new Vue({
  el: '#app',
  data() {
    return {
      taskTime: null
    }
  },
  watch: {
    taskTime(newValue) {
      console.log('clicked');
    }
  }
})

这是有效的sn-p。您在小提琴中错过了一个“}”；）

jsfiddle

version with counter

还有一件事：您的构建系统可以从最终代码中删除 console.log。