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}`;
    },
  },

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

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

javascript

vue.js

bootstrap-vue