如何在 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 但我不知道它的内容：

CODEPEN： 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="'productdetails-accordion'+index"

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