仅打开一个手风琴面板vue.js / bootstrap vue

debugcn 发表于 Dev

hendy0817

构建了一个Bootstrap-Vue手风琴，并且一切都按预期工作，但是，我只是添加了expand all /折叠所有按钮，这些按钮也按预期运行，但是现在我的问题是当我直接单击任何一个手风琴面板时，它们全部打开。有没有办法让他们只打开被点击的面板？

的HTML：

   <div class="container container-accordion-one">
      <!--expand all / collapse all row -->
      <div class="row row-expand-collapse">
        <div class="offset-md-1 col-expand-collapse">
          <ul class="list-expand-collapse">
            <li><a href="#/" @click="showCollapse = true" class="font__card-body">Expand All</a></li>
            <li><a href="#/" @click="showCollapse = false" class="font__card-body">Collapse All</a></li>
          </ul>
        </div>
      </div>
      <!--end: expand all / collapse all row -->
      <div class="row">
        <div class="offset-md-1 accordion-style-one">
          <div role="tablist">
            <b-card no-body class="">
              <b-card-header href="#" v-b-toggle.accordion-1 header-tag="header" class="accordion-header" role="tab">
                <p class="font__accordion-header">Accordion 1</p>
                <i class="fal fa-plus accordionClosed" />
                <i class="fal fa-minus accordionOpen" />
              </b-card-header>
              <b-collapse id="accordion-1" v-model="showCollapse" role="tabpanel">
                <b-card-body>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio enim fugit, inventore odio odit perferendis quas quo veritatis voluptate.</p>
                </b-card-body>
              </b-collapse>
            </b-card>

            <b-card no-body class="">
              <b-card-header href="#" v-b-toggle.accordion-2 header-tag="header" class="accordion-header" role="tab">
                <p class=" font__accordion-header">Accordion 2</p>
                <i class="fal fa-plus accordionClosed" />
                <i class="fal fa-minus accordionOpen" />
              </b-card-header>
              <b-collapse id="accordion-2" v-model="showCollapse" role="tabpanel">
                <b-card-body>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio enim fugit, inventore odio odit perferendis quas quo veritatis voluptate.</p>
                </b-card-body>
              </b-collapse>
            </b-card>

            <b-card no-body class="">
              <b-card-header href="#" v-b-toggle.accordion-3 header-tag="header" class="accordion-header" role="tab">
                <p class=" font__accordion-header">Accordion 3</p>
                <i class="fal fa-plus accordionClosed" />
                <i class="fal fa-minus accordionOpen" />
              </b-card-header>
              <b-collapse id="accordion-3" v-model="showCollapse" role="tabpanel">
                <b-card-body>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio enim fugit, inventore odio odit perferendis quas quo veritatis voluptate.</p>
                </b-card-body>
              </b-collapse>
            </b-card>
          </div>
        </div>
      </div>
    </div>

js：

export default {
  name: 'm',
  components: {
   LinksTo
  },
  data() {
    return {
      showCollapse: false
    };
  }
};

特洛伊·莫尔豪斯（Troy Morehouse）

由于希望每个折叠都可以单独打开或关闭，因此v-model每个折叠都需要有一个变量。下面，我使用数组存储折叠状态：

<template>
  <div>
    <b-button @click="expandAll">Expand all</b-button>
    <b-button @click="collapseAll">Collapse all</b-button>

    <b-button block v-b-toggle.accordion-1 class="mt-2">Accordion 1</b-button>
    <b-collapse id="accordion-1" v-model="collapseStates[0]">
      <div>Lorem ipsum dolor sit amet.</div>
    </b-collapse>

    <b-button block v-b-toggle.accordion-2 class="mt-2">Accordion 2</b-button>
    <b-collapse id="accordion-2" v-model="collapseStates[1]">
      <div>Lorem ipsum dolor sit amet.</div>
    </b-collapse>

    <b-button block v-b-toggle.accordion-3 class="mt-2">Accordion 3</b-button>
    <b-collapse id="accordion-3" v-model="collapseStates[2]">
      <div>Lorem ipsum dolor sit amet.</div>
    </b-collapse>
  </div>
</template>

<script>
export default {
  data() {
    return {
      collapseStates: [false, false, false]
    }
  },
  methods: {
    expandAll() {
      this.collapseStates = this.collapseStates.map(x => true)
    },
    collapseAll() {
      this.collapseStates = this.collapseStates.map(x => false)
    }
  }
}
</script>

在以下位置查看有效的提琴：https : //jsfiddle.net/p60zktLs/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。