I've been struggling with creating a card component for array elements in Vue Bootstrap. The goal is to open a modal specific to the clicked element when the header of the card is clicked. However, the issue I'm facing is that clicking on any header opens multiple modals, showing all array elements at once. How can I modify my code to only open the modal of the particular array element that was clicked? Here's the snippet I'm currently working with:
<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>