Hey, I'm facing a little syntax hiccup with '="collapse-{{ product.id }}"' in both the b-button and b-collapse. Any ideas on how to properly structure this? Just looking to set up a unique ID that connects the button to the collapse tag.
<b-list-group header="List Product 1">
<b-list-group-item
:variant="product.inventoryStatus ? 'success' : 'danger'"
style="min-width: 30%; max-width: 30%"
:border-variant="product.inventoryStatus ? 'success' : 'danger'"
align="center"
v-for="product in productList" :key="product.id">
<b-button v-b-toggle="collapse-{{ product.id }}" class="m-1">{{ product.name }}</b-button>
<b-collapse id="collapse-{{ product.id }}">
Price: {{ product.price }}<br>
Brand: {{ product.brand }}<br>
<p :bg-variant="product.inventoryStatus ? 'success' : 'danger'">{{ product.inventoryStatus ? 'IN STOCK' : 'OUT OF STOCK' }}</p>
<table>
<tr>
<td>
<b-button variant="danger" @click="deleteProduct(product.id)">
<i class="fa fa-trash"></i></b-button>
</td>
<td>
<UpdateProduct :product="product"/>
</td>
</tr>
</table>
</b-collapse>
</b-list-group-item>
</b-list-group>