javascript - 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>

标签： javascriptvue.jsbootstrap-vue

Answer 1

您可以创建一个method并将其传递product.id给它并使用该return值`

现场演示

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

并将方法定义为：

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