單選按鈕2.0

我建設VueJS 2.0一個小應用程序，我使用Inspinia保費管理模板，在那裏我有一個單選按鈕是這樣的：單選按鈕2.0

<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/

我不知道爲什麼它不工作，我想的東西是從執行該預防。用這些幫助我。

感謝

來源

2017-10-10 Nitish Kumar

我不確定，如果您的本地代碼中的數據缺少捲曲右括號。但在你提供的jsfiddle中，這是問題所在。在更新的[jsfiddle]（https://jsfiddle.net/60q14y26/1/）中，手錶工作正常。 – Pradeepb

@Pradeepb你說得對，我錯過了這個東西，但問題是當我在我的主題上實現同樣的東西時。相同的代碼不起作用。 –

<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。

來源

2017-10-10 13:39:56 donMateo

這是我錯過的，但問題不是這樣，我知道它正在工作，因爲我們在小提琴中繪製了正常的方式，但是當我在主題上實現相同的結果時，我沒有得到合適的結果。 –

我不太瞭解Inspinia。我找不到關於Vue的任何信息。您是否使用該產品的靜態HTML？ – donMateo

單選按鈕2.0

回答

相關問題