Bootstrap Vue动态prop实现问题：多手风琴组件交互开发

问题出在你用插值语法{{}}给v-b-toggle的修饰符传动态ID——Vue指令的修饰符不支持这种写法，得换用指令值绑定的方式传递动态目标ID。

修正方法很简单：把按钮上的v-b-toggle.accordion-{{index}}改成v-b-toggle="'accordion-' + index"（或者用ES6模板字符串v-b-toggle="accordion-${index}"），就能动态绑定对应手风琴的ID了。

修正后的完整代码：

<b-card
  v-for="(book, index) in data"
  :key="index"
  no-body
  class="mb-1"
>
  <b-card-header header-tag="header" class="p-1" role="tab">
    <b-button 
      block 
      v-b-toggle="'accordion-' + index" 
      variant="light"
    >
      {{ book.title }} <span class="mx-4"> - </span> {{ book.rating }}
    </b-button>
  </b-card-header>
  <b-collapse
    :id="`accordion-${index}`"
    accordion="my-accordion"
    role="tabpanel"
  >
    <b-card-body style="min-height: 300px">
      <b-card-text>
        {{book.review}}
      </b-card-text>
    </b-card-body>
  </b-collapse>
</b-card>

另外，b-collapse的:id绑定可以简化成模板字符串写法 :id="accordion-${index}"，和按钮的目标ID保持一致，更直观。

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