单页引导问题

Question

我一直在尝试为数组元素创建一个卡片组件，然后单击卡片的标题，应该会打开一个显示特定数组元素信息的模式。但是，在单击标题时，会打开多个模式，本质上即使我单击特定元素的标题，也会打开所有数组元素模式。我该如何做到这一点，以便只打开该特定模态的模态？我正在使用 vue 引导程序

     <div
        v-for="(value,key,index) in flowers"
        :key="value"
        class="card"
      >
        <div v-b-modal.modal-1 class="card-header" >
          <div>
            {{ value.name }}
          </div>
          <b-modal id="modal-1" title="Flowers">
            <p class="my-4" v-for="item in value.petals" :key="item">{{item}}</p>
          </b-modal>
        </div>
     </div>

Answer 1

您将相同的id 分配给您的所有模式。这意味着您正在创建一堆 ID 为 modal-1 的模态，然后单击标题告诉您的代码打开所有 ID 为 modal-1 的模态。

您需要为每个模态分配一个唯一的id。

在下面的 sn-p 中，我使用的是 key，但如果您对每个条目都有一个唯一值，我建议您改用它。

<div
  v-for="(value, key, index) in flowers"
  :key="value"
  class="card"
>
  <div v-b-modal:[`modal-${key}`] class="card-header" >
    <div>
     {{ value.name }}
    </div>
    <b-modal :id="`modal-${key}`" title="Flowers">
      <p class="my-4" v-for="item in value.petals" :key="item">{{item}}</p>
    </b-modal>
  </div>
</div>

Answer 2

我认为你所有的模态都有相同的 id id="modal-1"。您可以尝试使用顶部v-for 的key 像一个id，像这样id="modal-{{key}}。

这是一个例子：

<tbody>
  <tr v-for="item in items" v-on:click="select($event)" id="{{ item.ID }}">
     <td class="cod">{{ item.ID }}</td><td class="name">{{ item.NAME }}</td><td class="cat">{{ item.CATEGORY }}</td><td class="price">{{ item.PRICE }}</td>
  </tr>
</tbody>