Vue.js，连接字符串和变量的bootstrap-vue语法答案

【问题标题】：Vue.js, bootstrap-vue syntax of concatenating string and variableVue.js，连接字符串和变量的bootstrap-vue语法
【发布时间】：2021-12-09 12:48:54
【问题描述】：

我在 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>

【问题讨论】：

标签： javascript vue.js bootstrap-vue

【解决方案1】：

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

现场演示

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

并将方法定义为：

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

【讨论】：

我能够解决 1/2 的问题：v-b-toggle="`collapse-${product.id}`"