動態值複選框Vuejs 2

Question

我無法獲取複選框的值。

<li v-for="mainCat in mainCategories"> 
    <input type="checkbox" :value="mainCat.merchantId" v-model="mainCategories.merchantId" id="mainCat.merchantId" @click="merchantCategoryId"> 
</li> 

我的方法：

methods: {  
    merchantCategoryId: function() { 
    console.log(this.mainCategories.merchantId) 
    } 
} 

當點擊我只得到真假爲取消選中。 TY

Answer 1

<div id="demo" > 
    <ul> 
    <li v-for="mainCat in mainCategories"> 
     <input type="checkbox" :value="mainCat.merchantId" id="mainCat.merchantId" v-model="checkedCategories" @click="check($event)"> {{mainCat.merchantId}} 
    </li> 
    </ul> 
    {{ checkedCategories }} 
</div> 

而在你的腳本：

var demo = new Vue({ 
    el: '#demo', 
    data: { 
    checkedCategories: [], 
    mainCategories: [{ 
     merchantId: '1' 
     }, { 
     merchantId: '2' 
     }] 
    }, 
    methods: { 
    check: function(e) { 
     if (e.target.checked) { 
     console.log(e.target.value) 
     } 
    } 
    } 
}) 

檢查：https://vuejs.org/v2/guide/forms.html#Checkbox

工作小提琴：http://jsfiddle.net/yMv7y/2585/