Vue.js+BootstrapVue拼接字符串与变量绑定折叠面板ID语法问题

错误原因 #

在Vue的属性值（包括指令值）中，不能使用{{ }}模板插值语法，所有动态计算的内容都要直接写在JS表达式里。你要实现动态拼接唯一ID，直接用字符串拼接或者模板字符串即可。

正确写法 #

你只需要修改两处属性的写法：

1. b-button的v-b-toggle指令值改为动态拼接的字符串
2. b-collapse的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>

写法说明 #

• 用反引号包裹的 collapse-${product.id} 是ES6模板字符串语法，也可以替换成普通字符串拼接写法'collapse-' + product.id，效果完全一致。
• b-collapse的id前面加了冒号:，代表这是Vue动态属性绑定，属性值会按照JS表达式解析。
• v-b-toggle本身就是指令，直接把动态拼接的字符串传进去即可，不需要额外加冒号。

内容的提问来源于stack exchange，提问作者user17176542