單選按鈕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。