单页中的boostrap问题

问题描述

我一直在尝试为数组元素创建卡组件，然后单击卡的标题，应打开一个显示该特定数组元素信息的模式。但是，在单击标题时，会打开多个模式，实际上，即使我单击特定元素的标题，也会打开所有数组元素模式。我如何做到这一点，以便仅打开该特定模态的模态？我正在使用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>

解决方法

我认为您所有的模态都具有相同的ID id="modal-1"。您可以尝试将顶部key的{​​{1}}用作ID，例如v-for。

这是一个示例：

id="modal-{{key}}

,

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

您需要为每个模式赋予唯一的id。

在下面的代码段中，我使用的是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>