Javascript 单页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>

{{value.name}
{{item}

我想你所有的情态动词都有相同的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>

{{item.ID}{{item.NAME}{{{item.CATEGORY}}{{item.PRICE}}

您正在为所有模态指定相同的

id

。这意味着您正在创建一组id为

modal-1

的模态，然后单击标题，告诉您的代码打开id为

modal-1

的所有模态

您需要为每个模式指定一个唯一的

id

在下面的代码片段中，我使用的是

键

，但是如果每个条目都有一个唯一的值，我建议您使用它

{{value.name}
{{item}

是的，我想使用v-for的钥匙，但不确定在哪里使用。我尝试了

v-b-modal.modal-1（钥匙）

和中的

以及您的解决方案，但它对meI不起作用有一个问题，假设标题上有其他按钮，我不希望在单击标题上的其他按钮时打开模式，但如果我单击其他任何位置，则希望打开模式。如何操作？在cli上使用

。停止
修改器ck事件。
，这将阻止事件向上传播到标头事件。