当在父级中单击按钮时，使所有 <b-collapse> 在 child.vue 中不可见

Question

我正在与BootstrapVue 合作。

我有以下情况：我有一个parent.vue 和一个child.vue。在我的parent.vue 中，我有一个v-for，我可以在其中创建多个Buttons。这些中的每一个都在我的child.vue 中触发b-collapse，并且每个都有多个b-collapse。 （见代码）

现在我需要执行以下操作：当我的parent.vue 中的b-collapse 将关闭时，我想关闭我的child.vue 中的所有b-collapse。但我不知道该怎么做..（当我重新打开我的parent.vue-collapse 时，它​​们也应该关闭）

我已将代码减少到最低限度。但只是为了获得更多信息，我会在每次添加新项目或元素时执行this.inputs.push[{id: this.id +=1}]。所以他们每个人都有一个unique id。

希望有人能帮帮我！

代码

parent.vue

<div v-for="item in inputs" :key="item.id">
  <b-button v-b-toggle="'NewItem'+item.id"></b-button>
</div>

<Child/>

<b-button @click="addNewItem()"></b-button>

child.vue

<b-collapse visible :id="'NewItem' + item.id">  //Here i need a solution
  <div v-for="element in inputs" :key="element.id">
    <b-button v-b-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>

编辑 - 完整代码：

Parent.vue

<template>
<div class="container">
  <div v-for="(item, index) in inputs" :key="item.id">
    <b-button v-b-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>

Child.vue

<template>
  <b-collapse :visible="closeAllProducts" :id="'NewItem'+item.id">  
    <div v-for="(element, index) in inputs" :key="element.id">
      <b-button v-b-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>

新编辑：添加了closeAllProducts - 如果我在parent.vue 中单击我的button，它应该会触发将boolean 更改为**false** 的功能。但是当我像这样使用它时，每个项目中的所有元素都将是non visible.. 我需要传递一个parameter，但我不知道如何..

Answer 1

一种解决方案是创建一个折叠其b-collapse 元素的子道具，并让父控件控制该道具：

1. 在子节点中创建一个名为 collapsed 的布尔属性：

   // child.vue
   export default {
     props: {
       collapsed: Boolean
     }
   }
   

2. 在addElement() 中，插入一个visible 属性以匹配b-collapse 的visible 属性。我们将每个项目的 visible 绑定到相应的 b-collapse 属性。请注意，我们使用b-collapse 的v-model 绑定它的visible 属性，使项目的visible 属性与实际可见性状态保持同步。

   <!-- 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>
   

3. 在子组件的 collapsed 属性上添加 watcher。仅当 collapsed 为 true 时，此观察者才会将每个元素的 visible 属性设置为 false：

   // child.vue
   export default {
     watcher: {
       collapsed(collapsed) {
         if (collapsed) {
           this.inputs.forEach(input => input.visible = false)
         }
       },
     }
   }
   

4. 为确保每个元素的 ID 在父级上下文中是全局唯一的，请将父级 ID 合并到子级 ID 中：

   <!-- child.vue -->
   <div v-for="(element, index) in inputs" :key="element.id">
     <b-button v-b-toggle="'Element' + idParent + '.' + element.id" ⋯>
       ⋯                                   ?
     </b-button>
     <b-collapse :id="'Element' + idParent + '.' + element.id" ⋯>
       ⋯                             ?
     </b-collapse>
   </div>
   

5. 在父级的addNewItem() 中，添加collapsed 属性。我们将每个孩子的 collapsed 属性绑定到这个新属性，并在单击按钮时切换它：

   <!-- 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>
   

demo