如何在vue js v-for中单独折叠动态手风琴？答案

【问题标题】：How to separately collapse dynamic accordions inside a vue js v-for?如何在vue js v-for中单独折叠动态手风琴？
【发布时间】：2020-05-15 18:14:38
【问题描述】：

我需要单独折叠在 vue js v-for 中创建的手风琴。我知道像 Id 这样可以用来单独识别手风琴的东西可以解决这个问题。但是不知道在哪里给这个动态id？

这是我的 HTML

<div role="tablist">
<div v-for="item in productFormData" v-bind:key="item.id">
  <b-card no-body class="mb-1">
    <b-card-header header-tag="header" class="p-1" role="tab">
       <b-button block v-b-toggle.accordion-productdetails variant="info">Product Details</b-button>       
    </b-card-header>

    <b-collapse
      id="accordion-productdetails"
      visible
      accordion="productdetails-accordion"
      role="tabpanel"
    >

      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-4">
            <span style="font-size:13px;font-weight:bold;">Name</span>
            <div>
              <span id="spnCustomerName">{{item.name}}</span>
            </div>
          </div>


          </div>
    </b-collapse>
  </b-card>
</div>

【问题讨论】：

标签： html vue.js bootstrap-vue

【解决方案1】：

要为其添加动态 id，您需要在 for 循环中添加索引，因此每次使用索引来识别特定的手风琴时，像这样，或者您可以使用 item.id 但我不知道内容其中：

编解码器： https://codepen.io/emkeythekeyem/pen/WNbqeyM?editors=1010

<div role="tablist">
<div v-for="(item,index) in productFormData" v-bind:key="item.id">
  <b-card no-body class="mb-1">
    <b-card-header header-tag="header" class="p-1" role="tab">
       <b-button block v-b-toggle="'accordion-productdetails'+index" variant="info">Product Details</b-button>       
    </b-card-header>

    <b-collapse
      :id="'accordion-productdetails'+index"
      visible
      :accordion="'productdetails-accordion'+index"
      role="tabpanel"
    >

      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-4">
            <span style="font-size:13px;font-weight:bold;">Name</span>
            <div>
              <span id="spnCustomerName">{{item.name}}</span>
            </div>
          </div>


          </div>
    </b-collapse>
  </b-card>
</div>

见https://bootstrap-vue.js.org/docs/components/collapse/#usage：

<!-- Using value -->
  <b-button v-b-toggle="'collapse-2'" class="m-1">Toggle Collapse</b-button>

编辑：

查看我的代码，我注意到<b-collapse 中的 accordion 参数也需要更改，只需将其编辑为：

:accordion="'productdetails-accordion'+index"

我还编辑了我第一个答案的代码

【讨论】：

我已经尝试添加索引，但它仍然无法正常工作
产品详情
我在这里遗漏了什么吗？
应用我的代码，这是你想要完成的吗？ codepen.io/emkeythekeyem/pen/WNbqeyM?editors=1010 现在这 3 个手风琴通过自定义 ID 分开，每个手风琴都有自己的切换开关，如果您只单击一个，它们不会全部切换折叠。
谢谢阿德里安，你在 cidepen 所做的正是我所需要的。就我而言，即使我给出了 item.id，我实际上在 productForm 数据中也没有 id。 item.id 和 index 之间会有什么关系吗？
如果你没有 item.id ，你可以简单地使用 v-bind:key="index" 因为我在你的初始代码中看到你只是为了这个目的使用它。没有关系。

【解决方案2】：

使用带有CDN的Bootstrap 5，首先在public/index.html中导入<link>和JS bundle。
代码来自 Bootstrap 5 accordion。请注意，flush-headingOne 已更改为 'flush-heading'+index。
注意accordionCollection 可以从带有data() 的js 文件中导入，或者从父道具传递下来。属性title、description 可以在数组数据中定义不同。

HTML（模板）

<div class="accordion accordion-flush" id="accordionFlushExample">
    <div class="accoridon-item" v-for="(accordionItem,index) in accordionCollection" :key="index">
      <h2 class="accordion-header" :id="'flush-heading'+index">
        <button
          class="accordion-button collapsed"
            type="button"
            data-bs-toggle="collapse"
            :data-bs-target="'#flush-collapse'+index"
            aria-expanded="false"
            :aria-controls="'flush-collapse-'+index">
          {{ accordionItem.title }}
        </button>
      </h2>
      <div
        :id="'flush-collapse'+index"
        class="accordion-collapse collapse"
        :aria-labelledby="'flush-heading'+index"
        data-bs-parent="#accordionFlushExample">
        <div class="accordion-body"> {{ accordionItem.description }} </div>
      </div>
    </div>
  </div>

【讨论】：