只打开一个手风琴面板vue.js /引导vue

Question

建立一个引导-vue手风琴和一切工作的预期，然而，我只是添加了所有/折叠所有按钮，这也是我所期望的，但现在我的问题是，当我点击任何手风琴面板，他们都直接打开。有没有办法让他们只打开点击的面板？

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>

联署材料：

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

Answer 1

由于您希望每次折叠都能够单独打开或关闭，因此每次折叠都需要一个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/

Answer 2

您必须为每个选项卡声明一个单独的showCollapse标志。在“嘘”/“崩溃”中，所有这些都打开/关闭。

Answer 3

编辑：

使用枯燥的主体，你最好把手风琴内容分解成数据，只写一次标记，然后遍历你的数据。然后可以跟踪每个手风琴上的打开/关闭状态。

在您的代码中，每个手风琴都是在同一个变量上建模的，因此它们只能全部打开或全部关闭。每个手风琴都要有一个独立的状态。

示例：(简化以便更容易阅读，但您也可以使用引导)

​

new Vue({
  el: "#app",
  data: {
    allClosed: true,
    items: [{
        title: 'title 1',
        description: 'description one',
        open: false
      },
      {
        title: 'title 2',
        description: 'description two',
        open: false
      },
      {
        title: 'title 3',
        description: 'description three',
        open: false
      }
    ],
  },
  methods: {
    openCloseAll() {
      this.allClosed = !this.allClosed
      if (this.allClosed) this.items.map(x => x.open = false)
      else this.items.map(x => x.open = true)
    }
  }
})

.accordian {
  margin: 8px 0;
  cursor: pointer;
  background: pink;
  padding: 0.25em;
}

<div id="app">
  <div>
    <button @click="openCloseAll()">
      <template v-if="allClosed">Open</template>
      <template v-else>Close</template>
      All
     </button>
  </div>
  <div v-for="(item, i) in items" class="accordian" @click="item.open = !item.open">
    <span>{{ item.title }}</span>
    <br />
    <span v-if="item.open">{{ item.description }}</span>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

​

先前的建议：

这是实现这种功能的一种方法：

​

new Vue({
  el: "#app",
  data: {
    items: ['one', 'two', 'three', 'four', 'five'],
    openItems: [],
    openAll: true
  },
  methods: {
    toggle(i) {
      const index = this.openItems.findIndex(x => x === i)
      if (index !== -1) this.openItems.splice(index, 1)
      else this.openItems.push(i)
    },
    openCloseAll() {
      if (this.openAll) this.items.forEach((x, i) => this.openItems.push(i))
      else this.openItems = []
      this.openAll = !this.openAll
    }
  }
})

.accordian {
  margin: 8px 0;
  cursor: pointer;
  background: pink;
  padding: 0.25em;
}

<div id="app">
  <div>
    <button @click="openCloseAll()">
      <template v-if="openAll">Open</template>
      <template v-else>Close</template>
      All
     </button>
  </div>
  <div v-for="(item, i) in items" class="accordian" @click="toggle(i)">
    {{ item }}
    <span v-if="openItems.includes(i)">opened</span>
    <span v-else>closed</span>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

​