How to use vuejs data property as html attribute - vue.js

Question

I'm trying to create an accordion with bootstrap in vuejs using a card component in a loop. I want to use the id property of the command variable so that each card has its id so that when we click on a card, only this card will open and not all the cards. Here is my code:
<div id="accordion">
<div class="card" v-for="commande in commandes.data" :key="commande.id">
<div class="card-header" :id="commande.id">
<h3 class="card-title">
<button class="btn btn-link col-md-12" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="text-primary">{{commande.id}}</div>
</button>
</h3>
</div>
<!-- /.card-header -->
<div id="collapseOne" class="collapse show" :aria-labelledby="commande.id" data-parent="#accordion">
<div class="card-body table-responsive p-0">
<table class="table table-hover">
<tbody>
<tr v-for="(produit, index) in commande.produits" :key="index">
<td>{{produit.designation}}</td>
<td>{{produit.prix_vente}}</td>
<td>{{produit.pivot.quantite}}</td>
<td>{{produit.prix_vente*produit.pivot.quantite}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<pagination :data="commandes" #pagination-change-page="getResults"></pagination>
</div>
</div>
</div>
But when I click on a card, all the others open. it seems that this is due to the data-target attribute of the <button> tag of the card-header and the attribute id of the <div> which contains the card-body. I can't put a variable in the data-target attribute. How to solve this?

Answer 1

If you want to use Vue data properties as HTML Attribute, just put a ":" in front of it.
<div :id="name_of_data_property">