使用手风琴，在两个手风琴中，如何通过单击前一个手风琴内的按钮来显示后面的手风琴？

Question

我正在使用bulma和vuejs，我想拥有三个bulma手风琴。即，手风琴1和手风琴2，手风琴3。我能够同时制作三个手风琴。但是现在我想首先显示Accordion1并在其中放一个Button，在单击时手风琴1应该关闭，而Accordion2应该自动显示，类似地，我想在手风琴2中有一个按钮，onClick关闭手风琴2并显示手风琴3。我不想隐藏前面的手风琴。这样，当用户到达手风琴3时，所有手风琴都是可见的。我怎样才能做到这一点？

---

<BulmaAccordion>
              <BulmaAccordionItem>
                <h1 slot="title">Accordion1</h1>
                <div slot="content">
                  <div class="field">
                   <button></button>
                  </div>
                </div>
              </BulmaAccordionItem>
            </BulmaAccordion>

<BulmaAccordion>
              <BulmaAccordionItem>
                <h1 slot="title">Accordion1</h1>
                <div slot="content">
                  <div class="field">
                   <button></button>
                  </div>
                </div>
              </BulmaAccordionItem>
            </BulmaAccordion>

<BulmaAccordion>
              <BulmaAccordionItem>
                <h1 slot="title">Accordion1</h1>
                <div slot="content">
                  <div class="field">
                   <button></button>
                  </div>
                </div>
              </BulmaAccordionItem>
            </BulmaAccordion>

Answer 1

对于布尔玛+ Vue，我建议将Buefy及其Collapse with Accordion effect（文档链接here）。基本上，您只需要使用v-for循环进行索引，并根据索引触发每个按钮的点击事件（例如，在单击Btn1之后打开第二个，使条件打开到索引1（从数组中的0开始），然后打开0和1个索引对于Btn3，请点击）

希望这会有所帮助。