BootstrapVue рушится, открывая и закрывая все кнопки - PullRequest
Новая
       10

BootstrapVue рушится, открывая и закрывая все кнопки

0 голосов
/ 20 мая 2019

Это беспокоит меня уже некоторое время.

Может кто-нибудь, пожалуйста, помогите мне разобраться, как создать несколько коллапсов 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>

1 Ответ

0 голосов
/ 21 мая 2019

Спасибо сообществу 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>
...