BootstrapVue 折叠并打开和关闭所有按钮答案

【问题标题】：BootstrapVue collapses with open and close all buttonsBootstrapVue 折叠并打开和关闭所有按钮
【发布时间】：2019-10-06 10:09:28
【问题描述】：

这已经困扰了我一段时间了。

谁能帮我弄清楚如何构建多个单独打开和关闭的 BootstrapVue 折叠。事实上，单独的打开和关闭已经有效，因为它是开箱即用的。我希望“打开”和“关闭所有”按钮在任何时候都可以打开或关闭所有折叠。

https://codepen.io/akolinski/pen/ZNKraN

new Vue({
 el: "#app",
 data: {
  showCollapse: false
 }
});

<link href="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id='app'>
   <div class="row">
      <div class="col-12 mt-2">
      
         <h1>Vue with BootstrapVue collapse and open and close all buttons</h1>
         <p class="lead">The purpose of this pen is to build multiple BootstrapVue collapses that open and close individually. However we want the Open and Close all buttons to open all or close or collapses when pressed.</p>
         <hr>

         <div class="row my-3">
            <div class="col-12">
               <b-button class="mr-2" @click="showCollapse = true">Open all</b-button>
               <b-button @click="showCollapse = false">Close all</b-button>
            </div>
         </div>

         <div class="row mb-4">
            <div class="col-12">
               <b-button v-b-toggle.collapse-1 variant="primary">Toggle Collapse 1</b-button>
               <b-collapse id="collapse-1" class="mt-2">
                  <b-card>
                     <p class="card-text">Collapse 1 contents Here</p>
                  </b-card>
               </b-collapse>
            </div>
         </div>

         <div class="row mb-4">
            <div class="col-12">
               <b-button v-b-toggle.collapse-2 variant="primary">Toggle Collapse 2</b-button>
               <b-collapse id="collapse-2" class="mt-2">
                  <b-card>
                     <p class="card-text">Collapse 2 contents Here</p>
                  </b-card>
               </b-collapse>
            </div>
         </div>
         
         <div class="row">
            <div class="col-12">
               <b-button v-b-toggle.collapse-3 variant="primary">Toggle Collapse 3</b-button>
               <b-collapse id="collapse-3" class="mt-2">
                  <b-card>
                     <p class="card-text">Collapse 3 contents Here</p>
                  </b-card>
               </b-collapse>
            </div>
         </div>

      </div>
   </div>
</div>

【问题讨论】：

这是一种解决方法，请原谅我，但您可以通过编程方式为可折叠按钮分配一个 ID，并使用 querySelectorAll 获取元素 ID 并单击它们 codepen.io/anon/pen/mYMjRB 这有一些边缘情况，但它可能会让你走上正确的道路。
@KevinHernandez 我也有类似的情况。这样做的困难在于，如果单个崩溃已经打开，那么它将关闭。我需要告诉它只是切换所有折叠的打开，无论它们是已经打开还是关闭。
好的，然后给每个按钮一个v-model，并默认设置为false，如果单击按钮，它将设置为true，true表示折叠菜单在视图中。在我向您展示的代码中，当您遍历每个元素时，如果当前元素 v-model 为真或假（无论您想要什么），则跳过该元素并继续。

标签： javascript vue.js bootstrap-vue

【解决方案1】：

感谢 Discord 上的 BootstrapVue 社区。我们想出了这个 CodePen 来显示正确的功能。

图片来源：Hiws#0325

https://codepen.io/Hiws/pen/MdvPEX

new Vue({
 el: "#app",
 data: {
  collapses: [ 
     { show: false },
     { show: false },
     { show: false }
  ]
 },
 methods: {
    openAll() {
       this.collapses.forEach(collapse => {
          collapse.show = true
       })
    },
    closeAll() {
       this.collapses.forEach(collapse => {
          collapse.show = false
       })
    }
 }
});

<link href="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id='app'>
   <div class="row">
      <div class="col-12 mt-2">
         <h1>Vue with BootstrapVue collapse and open and close all buttons</h1>
         <p class="lead">The purpose of this pen is to build multiple BootstrapVue collapses that open and close individually. However we want the Open and Close all buttons to open all or close or collapses when pressed.</p>
         <hr>

         <div class="row my-3">
            <div class="col-12">
               <b-button class="mr-2" @click="openAll">Open all</b-button>
               <b-button @click="closeAll">Close all</b-button>
            </div>
         </div>

         <div class="row mb-4" v-for="(collapse, index) in collapses" :key="index">
            <div class="col-12">
               <b-button @click="collapse.show = !collapse.show" variant="primary">Toggle Collapse {{ index + 1 }}</b-button>
               <b-collapse v-model="collapse.show" id="collapse-1" class="mt-2">
                  <b-card>
                     <p class="card-text">Collapse {{ index + 1 }} contents Here</p>
                  </b-card>
               </b-collapse>
            </div>
         </div>
      </div>
   </div>
</div>

【讨论】：