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模型/数据

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

这是一个工作片段。你在小提琴中错过了一个“}”;）

jsfiddle

version with counter

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

Vuejs 2.0中的单选按钮

1 个答案: