Vue.js, bootstrap-vue syntax of concatenating string and variable

Question

I'm having a syntax issue with '="collapse-{{ product.id }}"' both in the b-button & b-collapse. How should this be formed? Just trying to create a unique ID that ties 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>

Answer 1

You can create a method and pass the product.id to it and use the return value`

Live Demo

:v-b-toggle="getToggleValue( product.id )"

and define method as:

methods: {
    getToggleValue(id) {
      return `collapse-${id}`;
    },
  },