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

Question

我正在使用 BootstrapVue .
我有以下情况:我有一个 parent.vue和 child.vue .在我的 parent.vue我有一个 v-for我可以在哪里创建多个 Buttons .其中每一个都触发了 b-collapse在我的child.vue每个都有多个 b-collapse以及。 (见代码)
现在我需要做以下事情:我想关闭我所有的 b-collapse在我的child.vue当我的b-collapse在我的parent.vue将被关闭。但我不知道该怎么做..(当我重新打开我的 parent.vue -collapse 时，它​​们也应该关闭)
我已将代码减少到最低限度。但只是为了获得更多信息，我会做 this.inputs.push[{id: this.id +=1}]每次添加一个新的项目或元素。所以他们每个人都有一个 unique id .
希望有人可以帮助我!
代码
父.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>

编辑 - 完整代码:
父.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 - 如果我点击我的button在我的parent.vue它应该触发函数来改变 boolean至**false** .但是当我像这样使用它时，每个项目中的所有元素都将是 non visible .. 我需要通过 parameter有了它，但我不知道如何..

Answer 1

一种解决方案是创建一个折叠其 b-collapse 的子 Prop 。元素，并拥有该 Prop 的父控件:

创建一个名为 collapsed 的 bool 属性在 child 身上:

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

在 addElement() , 插入 visible与 b-collapse 匹配的 Prop 的visible支柱。我们将绑定(bind)每个项目的visible到相应的b-collapse支柱。注意我们使用 b-collapse的v-model绑定(bind)其visible Prop ，它保留了项目的 visible Prop 与实际可见性状态同步。

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

添加 watcher在 collapsed Prop 在 child 身上。这个观察者将设置每个元素的 visible支持 false仅当 collapsed是 true :

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

为确保每个元素的 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>

在家长的addNewItem() , 添加 collapsed属性(property)。我们将绑定(bind)每个 child 的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