单选按钮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模型/在我的数据的数据集

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。