时间戳

首页 > 解决方案 > BootstrapVue 折叠并打开和关闭所有按钮

javascript - BootstrapVue 折叠并打开和关闭所有按钮

问题描述

这一直困扰着我一段时间。

有人可以帮我弄清楚如何构建多个单独打开和关闭的 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>

标签： javascriptvue.jsbootstrap-vue

解决方案

感谢 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>

推荐阅读