单页中的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，然后单击标题，告诉您的代码打开所有具有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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。