做所有<b-collapse>在父級中單擊按鈕時在 child.vue 中不可見</b-collapse>

Question

我正在使用BootstrapVue 。

我有以下情況：我有一個parent.vue和一個child.vue 。 在我的parent.vue ，我有一個v-for ，我可以在其中創建多個Buttons 。 這些中的每一個都在我的child.vue中觸發了b-collapse ，並且每個都具有多個b-collapse 。 （見代碼）

現在我需要執行以下操作：當我的child.vue中的b-collapse將關閉時，我想關閉parent.vue中的所有b-collapse -collapse。 但我不知道該怎么做..（當我重新打開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>

孩子.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>

孩子.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 ，它應該觸發 function 將boolean更改為**false** 。 但是當我像這樣使用它時，每個項目中的所有元素都將non visible ..我需要傳遞一個parameter ，但我不知道如何..

Answer 1

一種解決方案是創建一個折疊其b-collapse元素的子道具，並讓父控件控制該道具：

1. 在子項中創建一個名為collapsed的 Boolean 道具：

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

2. 在addElement()中，插入visible道具以匹配b-collapse的visible道具。 我們將每個項目的visible綁定到相應的b-collapse道具。 請注意，我們使用b-collapse的v-model來綁定它的visible屬性，這使項目的visible屬性與實際可見性 state 保持同步。

    <.-- 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道具上添加一個觀察者。 只有當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 vb-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>

演示