在v-for循环中使用bootstrap-vue Modal，如何仅打开点击对应的弹窗

问题根因 #

现有实现里，循环渲染生成的所有Modal都共用同一个固定id example-modal。而v-b-modal指令的触发规则是根据匹配到的同id元素唤起弹窗，所有同id的Modal都会被同时触发，因此点击任意按钮会一次弹出全部循环生成的弹窗。

修正方案（保留Modal放置在循环内的业务要求） #

核心调整：为每个循环渲染的Modal生成全局唯一的对应id，同时让同个循环项内的触发按钮绑定和Modal完全一致的id，彻底避免id共用。

修正后代码 #

<!-- 模板部分 -->
<b-list-group-item v-for="item in items" :key="item">
  <!-- 动态绑定当前遍历项对应的唯一弹窗id -->
  <b-button v-b-modal="`example-modal-${item}`">
    {{ item }}
  </b-button>
  <!-- 给循环内的Modal绑定和触发按钮匹配的动态唯一id -->
  <b-modal :id="`example-modal-${item}`">
    <p>当前弹窗展示内容：{{ item }}</p>
  </b-modal>
</b-list-group-item>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5, 6, 7],
    };
  },
};
</script>

落地注意点 #

• 动态拼接id时，优先使用遍历项的全局唯一标识（比如业务数据的主键ID）作为拼接要素，不要用可能重复的展示值来生成id，避免id冲突导致触发异常
• v-b-modal.xxx这类点语法写法仅适配固定静态id的场景，需要动态匹配弹窗id时，要把目标弹窗的id字符串作为指令的表达式值传入，无法通过点语法实现动态匹配

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