Tengo un modelo v en la casilla de verificación cuyos valores se asignan desde un bucle. Quiero que el evento de clic invoque una función donde necesito acceder a los datos de los marcados. Cuando se activa un clic, si registro el estado, no imprime los datos actuales de la casilla de verificación. Imprime los datos de la casilla de verificación en la que se hizo clic anteriormente. ¿Se debe pasar un evento y acceder a los datos en la función?
<div id="demo"> <ul> <li v-for="mainCat in mainCategories"> <input type="checkbox" :value="mainCat.merchantId" id="mainCat.merchantId" v-model="checkedCategories" @click="check(checkedCategories)" > {{mainCat.merchantId}} </li> </ul> {{ checkedCategories }} </div>texto:
var demo = new Vue({ el: '#demo', data: { checkedCategories: [], mainCategories: [{ merchantId: '1' }, { merchantId: '2' }] //testing with data use: [{done:false,content:'testing'}] }, methods: { check: function(e) { console.log(this.checkedCategories,e) } } })Js violín: http://jsfiddle.net/bmpfs2w2/
Utilice @change en lugar de @click . El evento de clic se activa antes de que el valor realmente cambie.
<input type="checkbox" :value="mainCat.merchantId" id="mainCat.merchantId" v-model="checkedCategories" @change="check($event)">Si desea que se llame a la función después de que se haya cambiado el valor, puede ajustar la funcionalidad de su controlador dentro de this.$nextTick() . Puedes leer sobre $nextTick , pero la esencia es
Aplazar la devolución de llamada para que se ejecute después del próximo ciclo de actualización de DOM. Úselo inmediatamente después de haber cambiado algunos datos para esperar la actualización de DOM.
Entonces, se llamará a su controlador después de que se actualice el DOM, es decir, después de que su estado haya cambiado y los efectos se hayan reflejado en el DOM.
<input type="checkbox" :value="mainCat.merchantId" id="mainCat.merchantId" v-model="checkedCategories" @change="check($event)" > // ... check (e) { this.$nextTick(() => { console.log(checkedCategories, e) }) }Solución de Grant alterada
<input type="checkbox" :value="mainCat.merchantId" id="mainCat.merchantId" v-model="checkedCategories" @change="check($event)" /> // ... check (e) { this.$nextTick(() => { console.log(e.target.id) }) }gracias subvención