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

Question

我需要单独折叠在 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>

Answer 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"

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

Answer 2

使用Bootstrap5和CDN，首先导入<link>和JSbundle在public/index.html.
代码来自Bootstrap5accordion。请注意，flush-headingOne 已更改为 'flush-heading'+index。
注意 accordionCollection 可以使用 data() 从 js 文件导入，或者从父 props 传递下来。属性 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>

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

How to separately collapse dynamic accordions inside a vue js v-for?

html

vue.js

bootstrap-vue