Vue.js模板使用多个modal时点击一个所有模态框均打开问题求助

问题原因 #

你猜测的没错，问题就是所有modal复用了相同的静态idrow，BootstrapVue的v-b-modal指令会触发所有id匹配的modal弹出，所以点击任意行的按钮会触发所有行的modal。

修复方案 #

用每行的唯一标识动态拼接modal的id，保证每个modal的id全局唯一即可。

方案1：用行数据唯一字段拼接（推荐） #

如果你的行数据存在id这类唯一标识字段，直接用该字段拼接id：

<template #cell(add)="row">
  <div>
    <b-button
      v-b-modal="`row-modal-${row.item.id}`"
      class="bg-dark text-white"
      test-id="showOrHideAddButton"
      size="sm"
    >
      add
    </b-button>
    <b-modal :id="`row-modal-${row.item.id}`">
      Hello From My Modal!
    </b-modal>
  </div>
</template>

方案2：用行索引拼接 #

如果没有唯一字段，可以用表格提供的行索引拼接：

<template #cell(add)="row">
  <div>
    <b-button
      v-b-modal="`row-modal-${row.index}`"
      class="bg-dark text-white"
      test-id="showOrHideAddButton"
      size="sm"
    >
      add
    </b-button>
    <b-modal :id="`row-modal-${row.index}`">
      Hello From My Modal!
    </b-modal>
  </div>
</template>

注意事项 #

• id属性前必须加冒号:进行动态绑定，否则会被识别为静态字符串
• 拼接的前缀可自定义，只要保证最终生成的id全局唯一即可

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