Vue 2中b-button的v-b-toggle指令及b-collapse的id未正确解析模板变量问题

嘿，我一眼就看出问题所在啦！你遇到的是Vue 2里模板语法的常见小坑——双大括号{{}}只能用来渲染文本内容，不能直接用在HTML属性或者指令参数里，这就是为什么你的collapse-{{index}}会原封不动显示的原因。

解决起来很简单，换成Vue的动态绑定语法就好：

1. 对于v-b-toggle的动态目标：
   指令参数需要动态生成的话，要用方括号包裹表达式，结合ES6模板字符串拼接出唯一的折叠面板ID，写法是v-b-toggle:[collapse-${index}]。

2. 对于b-collapse的id属性：
   用v-bind:id的简写:id来绑定动态生成的ID，也就是:id="collapse-${index}"。

另外别忘了给v-for加上:key属性，这是Vue列表渲染的最佳实践，能避免很多潜在的渲染问题~

修改后的完整代码片段如下：

<li v-for="(item, index) in searchResult.data.items" :key="index">
  <b-button v-b-toggle:[`collapse-${index}`] variant="primary">{{ item.name }}</b-button>
  <b-collapse :id="`collapse-${index}`" class="mt-2">
    <b-card>
      <p class="card-text">{{ item.machine_code }}</p>
    </b-card>
  </b-collapse>
</li>

这样修改后，Vue就能正确解析index变量，生成collapse-0、collapse-1这类对应的ID，按钮和折叠面板也能正常关联起来啦！

备注：内容来源于stack exchange，提问作者chx