Estoy trabajando con BootstrapVue .
Tengo la siguiente situación: tengo un parent.vue y un child.vue . En mi parent.vue tengo un v-for donde puedo crear varios Buttons . Cada uno de estos está desencadenando un b-collapse en mi child.vue y cada uno de estos también tiene múltiples b-collapse . (ver Código)
Ahora debo hacer lo siguiente: quiero cerrar todo mi b-collapse dentro de mi child.vue cuando se cierre mi b-collapse en mi parent.vue . Pero no pude averiguar cómo hacerlo ... (también deberían estar cerrados cuando reabro mi parent.vue -collapse)
He reducido mi código al mínimo. Pero solo para obtener información adicional, haré this.inputs.push[{id: this.id +=1}] cada vez que agregue un nuevo elemento o elemento. Así que cada uno de ellos tiene una unique id .
¡Ojalá alguien pueda ayudarme!
CÓDIGO
padre.vue
<div v-for="item in inputs" :key="item.id"> <b-button vb-toggle="'NewItem'+item.id"></b-button> </div> <Child/> <b-button @click="addNewItem()"></b-button>niño.vue
<b-collapse visible :id="'NewItem' + item.id"> //Here i need a solution <div v-for="element in inputs" :key="element.id"> <b-button vb-toggle="'Element' + element.id"></b-button> <b-collapse :id="'Element' + element.id> <div>Here is Element {{element.id}}</div> </b-collapse> </div> <b-button @click="addElement()"></b-button> </b-collapse>EDITAR - Código completo:
Padre.vue
<template> <div class="container"> <div v-for="(item, index) in inputs" :key="item.id"> <b-button vb-toggle="'NewItem'+item.id" @click="closeAll()">Item {{index + 1}}</b-button> </div> <Child :idParent="item.id" :closeAllProducts="closeAllProducts" /> <b-button @click="addNewItem()">Add new Item</b-button> </div> </template> <script> import Child from "./components/child.vue" export default { components: { Child, }, data() { return { closeAllProducts: true, id: 1, inputs: [{ id: 1, }] } }, methods: { addNewItem() { this.inputs.push({id: this.id += 1}) }, closeAll() { this.closeAllProducts = false; } } } </script>niño.vue
<template> <b-collapse :visible="closeAllProducts" :id="'NewItem'+item.id"> <div v-for="(element, index) in inputs" :key="element.id"> <b-button vb-toggle="'Element' + element.id"></b-button> <b-collapse :id="'Element' + element.id"> <div>Here is Element {{index + 1}}</div> </b-collapse> </div> <b-button @click="addElement()">Add new Element</b-button> </b-collapse> </template> <script> export default { props: ["idParent", "closeAllProducts"], data() { return { id: 1, inputs: [{ id: 1, }] } }, methods: { addElement() { this.inputs.push({id: this.id += 1}) } } } </script> NUEVA EDICIÓN : Se agregó closeAllProducts : si hago clic en mi button en mi parent.vue , debería activar la función para cambiar el valor boolean a **false** . Pero cuando lo uso así, todos los elementos de cada elemento no serán non visible ... Necesito pasar un parameter con él, pero no pude averiguar cómo...
Una solución es crear un accesorio secundario que colapse sus elementos b-collapse , y hacer que el padre controle ese accesorio:
Cree un accesorio booleano llamado collapsed en el niño:
// child.vue export default { props: { collapsed: Boolean } } En addElement() , inserte un accesorio visible para que coincida con el accesorio visible de b-collapse . Vincularemos los elementos visible de cada elemento al objeto b-collapse correspondiente. Tenga en cuenta que usamos v-model b-collapse para vincular su accesorio visible , lo que mantiene el accesorio visible del elemento sincronizado con el estado de visibilidad real.
<!-- child.vue --> <script> export default { data() { return { inputs: [ { id: 1, visible: false, }, 👆 ], } }, methods: { addElement() { this.inputs.push({ id: ++this.id, visible: false }) } 👆 } } </script> <template> ⋮ 👇 <b-collapse v-model="element.visible" ⋯> <div>Here is Element {{ index + 1 }}</div> </b-collapse> </template> Agregue un observador en el accesorio collapsed en el niño. Este observador establecerá el accesorio visible de cada elemento en false solo cuando el collapsed sea true :
// child.vue export default { watcher: { collapsed(collapsed) { if (collapsed) { this.inputs.forEach(input => input.visible = false) } }, } }Para asegurarse de que la ID de cada elemento sea globalmente única en el contexto de los padres, incorpore la ID principal en las ID secundarias:
<!-- child.vue --> <div v-for="(element, index) in inputs" :key="element.id"> <b-button vb-toggle="'Element' + idParent + '.' + element.id" ⋯> ⋯ 👆 </b-button> <b-collapse :id="'Element' + idParent + '.' + element.id" ⋯> ⋯ 👆 </b-collapse> </div> En el elemento principal addNewItem() , agregue una propiedad collapsed . Vincularemos el accesorio collapsed de cada niño a esta nueva propiedad y lo alternaremos con un clic de botón:
<!-- parent.vue --> <script> export default { data() { return { inputs: [ { id: 1, collapsed: false, }, 👆 ], } }, methods: { addNewItem() { this.inputs.push({ id: ++this.id, collapsed: false }) } 👆 } } </script> <template> ⋮ <div v-for="(item, index) in inputs" :key="item.id"> <b-button @click="item.collapsed = !item.collapsed"> ⋯ 👆 </b-button> <Child :idParent="item.id" :collapsed="item.collapsed" /> </div> 👆 </template>