es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Conteo incorrecto Vuejs $emit

31 May, 2023 Programación

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?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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:

    1. Agregue una propiedad computada en el componente padre que devuelva la longitud del array checkedBrands:
    computed: {
  checkedBrandsLength() {
    return this.checkedBrands.length;
  }
}
    1. En la plantilla del componente padre, reemplace {{ checkedBrands.length }} con la nueva propiedad computada:
    <v-search-bar @action="takeBrands"></v-search-bar>
Contador de marcas seleccionadas: {{ checkedBrandsLength }}
    1. Agregue un observador para el array checkedBrands en el componente padre:
    watch: {
  checkedBrands(newVal, oldVal) {
    this.checkedBrandsLength = newVal.length;
  }
}

    Ahora el valor de checkedBrandsLength se actualizará en tiempo real cada vez que cambie el array checkedBrands, y la cuenta de la longitud del array será correcta desde el primer clic.

Comments are closed.