Vue.js，連接字符串和變量的bootstrap-vue語法

Question

我在 b-button 和 b-collapse 中都遇到了 '="collapse-{{ product.id }}"' 的語法問題。 這應該如何形成？ 只是試圖創建一個唯一的 ID，將按鈕與折疊標簽聯系起來。

  <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

您可以創建一個method並將product.id傳遞給它並使用return `

現場演示

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

並將方法定義為：

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