BootstrapVue使用打开和关闭所有按钮进行折叠

Question

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

谁能帮我弄清楚如何建立多个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>

​

Answer 1

感谢不和谐的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>

​