0
134
Vistasverifique el valor de los accesorios en el componente secundario si está disponible
Estoy trabajando actualmente con BootstrapVue .
Tengo un b-dropdown en mi parent.vue donde puedo seleccionar un objeto de un archivo JSON y convertirlo en una matriz porque necesito la longitud de este objeto json. ¡¡Esto funciona bien!!
Mi problema es que necesito verificar en mi parent.vue si se seleccionó algo, por lo que si this.arrayLength es mayor que 0 (¡hasta este punto funciona todo bien!) . Si esto es cierto, debería usar y mostrar addElementsNotClickable() en mi child.vue donde no se pueden agregar elementos (el recuento de las entradas es igual a la longitud de la matriz); de lo contrario, debería usar y mostrar mi botón addElement() donde múltiples los elementos se pueden agregar manualmente.
Pero no puedo verificar mi child.vue si arrayLenght > 0 ... Y no sé qué usar en el segundo botón, por ejemplo, @change (??) ¿Cómo puedo resolver eso?
¡Muchas gracias! ¡He tratado de ser lo más detallado posible!
Información adicional : ¡No recibo códigos de error!
mi padre.vue:
methods: { inputedValue(input, index) { var array = []; const item= this.json.find((i) => i.Number === input); for (let key in item.ID) { array.push(item.ID[key]); } if(array.length > 0) { this.getIndex = index; this.getDataArray = array; this.getLengthArray = array.length; } } }mi hijo.vue (plantilla)
<div class="mt-4 mb-5 ml-3 mr-3"> <b-button v-if="!hide" @click="addElement" variant="block">Add Element</b-button> <b-button v-if="hide" @???="addElementNotClickable" variant="block">Not clickable ! </b-button> </div>mi hijo.vue (script)
methods: { addElementsNotClickable() { for(let i = 1; i < this.arrayLength; i++) { this.inputs.push({}) } }, addElement() { this.inputs.push({}) }, } data() { return { inputs: [{}] arrayLength: this.getLengthArray, arrayIndex: this.getIndex, hide: false, } props: [ "getLengthArray", "getIndex" ],1 Respuestas
Responde la pregunta0
Está malinterpretando cómo deberían funcionar los componentes en Vue. En resumen, puedes entenderlos por:
los padres envían accesorios hacia abajo y los niños envían eventos hacia arriba
Lo que está buscando es que cada vez que su arrayLength se actualice, envíe un evento al padre. Entonces, es responsabilidad de los padres manejar ese evento. En este caso, el padre recibiría el evento y almacenaría la longitud de la matriz.
Padre.vue
<template> <div> <child @arrayLenght:update="onArrayLenghtUpdate"/> </div> </template> <script> export default { data: () => { arrayLength: 0, }, methods: { onArrayLenghtUpdate(length) { this.arrayLength = length; } } } </script>niño.vue
<template> ... </template> <script> export default { data: () => ({ arrayLength: 0, }), watch: { arrayLenghth: function (newLenght) { this.$emit('arrayLenght:update', newLenght); } } } </script> Esta es la forma estándar y extremadamente útil si su Parent y su Child no están muy acoplados. Si dependen el uno del otro (no usará Child.vue en ningún otro lugar de la aplicación. Solo como hijo directo de Parent.vue ), entonces puede usar el enfoque inject/provide . Este enfoque está más allá del alcance de esta respuesta, siéntase libre de leer un artículo al respecto