Basically, I have set up a vue web application with a container containing multiple bootstrap cards. Each card has a button that is supposed to collapse a form for guests to apply. However, the issue arises when I click on the button of one card, as it collapses the forms on all the cards simultaneously. To correct this behavior, I need to assign a unique id to each card that matches the data-bs-target and aria-controls attributes of the button. So far, so good.
I attempted to use a variable called card_id and integrated it into the attribute values using v-bind, but unfortunately, it did not work as expected. The problem lies in the fact that the data-bs-target attribute requires a hash symbol before the variable name, and I am currently unsure of how to achieve this.
Code snippet:
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" :data-bs-target="card_id" aria-expanded="false" :aria-controls="card_id">Apply now!</button>
<div class="collapse" :id="card_id">
<div class="card card-body">
<GuestForm></GuestForm>
</div>
</div>
It is clear that simply adding a hash symbol in front of the variable is not a viable solution. So, what alternative approach can I take to address this issue? Any insights would be greatly appreciated.