Question

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

请有人帮我弄清楚如何构建多个分别打开和关闭的BootstrapVue折叠。实际上，开箱即用已经可以正常工作，因为开箱即用。我希望在任何时候按下“打开”和“关闭所有”按钮都可以全部打开或关闭所有折叠。

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>

BootstrapVue通过打开和关闭所有按钮折叠

1 个答案: