Как отдельно свернуть динамические c аккордеоны внутри vue js v-for? - PullRequest
Новая
       23

Как отдельно свернуть динамические c аккордеоны внутри vue js v-for?

0 голосов
/ 30 января 2020

Мне нужно отдельно свернуть аккордеоны, созданные внутри vue js v-for. Я знаю, что что-то вроде Id, которое можно использовать для отдельной идентификации аккордеона, решит эту проблему. Но не знаю, где дать этот динамический c идентификатор?

Вот мой 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>

1 Ответ

2 голосов
/ 30 января 2020

Чтобы добавить к нему динамический c id, вам нужно добавить индекс в для l oop, поэтому каждый раз, когда вы используете индекс для идентификации указанного аккордеона c, подобного этому, или вы можете использовать свой предмет. идентификатор, но я не знаю его содержания:

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>

РЕДАКТИРОВАТЬ:

Просматривая мой код, я заметил, что параметр accordion в <b-collapse также необходимо изменить, просто измените его на: 

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

Я также отредактировал код моего первого ответа

...