2017-05-05 4 views
0

Ich kann den Wert des Kontrollkästchens nicht abrufen.Dynamic Value Checkbox Vuejs 2

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

Meine Methode:

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

Wenn es klickt ich nur für uncheck wahr und falsch bekommen. TY

Antwort

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

Und in Ihrem Skript:

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

prüfen dies: https://vuejs.org/v2/guide/forms.html#Checkbox

Arbeits Geige: http://jsfiddle.net/yMv7y/2585/

+0

, dass der Wert meiner Konfiguration nicht aus der Datenbank kam und ich es zeigen von v-for. Der Zweck von @click ist, eine Methode auszulösen und den Wert des ausgewählten Kontrollkästchens zu erhalten. TY für deine Antwort. – Rbex

+0

Aber das kann ohne @click erreicht werden. – Deepak

+0

Ich muss es erreichen, indem ich klicke, weil ich diese ID zurück an die Datenbank senden werde. – Rbex