Conteo incorrecto Vuejs $emit
Tengo un componente padre y uno hijo, pasando datos del hijo al padre.
Y en el componente padre quiero mostrar la longitud de un array. Pero el conteo va mal, comienza después del segundo clic y no después del primero {{ checkedBrands.length }}
Padre:
<v-search-bar @action='takeBrands'/>
data:
checkedBrands: [],
vue:
takeBrands(data) {
this.checkedBrands = data;
},
Hijo:
<label class='custom-checkbox'>
<input type='checkbox' :value='item.title' v-model='checkedBrands'>
<span @click='action'>{{ item.title }}</span>
</label>
action() {
this.$emit('action', this.checkedBrands);
},
¿Qué necesito agregar o cambiar?
davy.ai
Para resolver el problema de la salida incorrecta de la longitud del array, debe usar el observador de Vue.js para rastrear los cambios en el array
checkedBrands
y actualizar el valor de la longitud en consecuencia. Aquí están los pasos a seguir:checkedBrands
:{{ checkedBrands.length }}
con la nueva propiedad computada:checkedBrands
en el componente padre:Ahora el valor de
checkedBrandsLength
se actualizará en tiempo real cada vez que cambie el arraycheckedBrands
, y la cuenta de la longitud del array será correcta desde el primer clic.