Vue.js 单击表格元素时显示不同的弹出窗口

我对VueJS很陌生。我正在尝试填充一个表。其中一列是一个按钮，单击该按钮将打开一个模式。情态动词可以有3种不同的类型。我试着这样解决问题：

我已经在这个参考代码之后链接了我的JSFIDLE

HTML

风格：

#app {
  padding: 20px;
  height: 500px;
}

更新：

在添加分页后，我能够复制下面描述的错误

我的小提琴：

要进行复制，请转到其他页面，尝试打开所有模态。有些是开不开的

观察：

我看到，在我从最初的页面切换到不同的页面后，每个页面只能打开一个模式

有没有更好的办法？还是我遗漏了一些琐碎的东西

错误描述符位于：

我在代码中遇到了一个奇怪的行为，大多数行（对我来说似乎是随机的）在单击按钮时都不会打开弹出窗口。即使是相同的模式类型也会出现这种情况

假设该列的p、Q条目的类型为modal1。点击P打开一个模态，点击Q则不打开

---

我知道这个bug看起来很模糊，但如果有人能给我指出正确的方向，我将非常高兴。谢谢。

无法解释为什么会发生这种情况（可能是bootstrap vue的一个bug）。无论如何，如果您替换：

<b-btn v-b-modal.modal1 size="sm" @click="details(item.item)">Details</b-btn>
<b-btn v-b-modal.modal2 size="sm" @click="details(item.item)">Details</b-btn>
<b-btn v-b-modal.modal3 size="sm" @click="details(item.item)">Details</b-btn>

详细信息
细节
细节

与：

详细信息
细节
细节

它似乎工作得很好

---

希望这对您有所帮助。

是的，似乎这确实解决了问题，我已经在他们的github上提出了一个问题。我已经用你的评论进一步更新了它。谢谢你抽出时间来尝试。嗨，法比奥。我只是更深入地研究了这个问题。情态动词现在对所有条目开放。但其中一些打开了错误的模态。请你核对一下。我已经更新了年龄参数，做了你建议的修改，还做了一个新的提琴：@nighthowler看起来情态动词总是按照第一页的顺序打开的。我对bootstrap vue了解不多，也许你应该以某种方式为你的项目设置一个键，但我找不到任何关于它的信息。

#app {
  padding: 20px;
  height: 500px;
}

<b-btn v-b-modal.modal1 size="sm" @click="details(item.item)">Details</b-btn>
<b-btn v-b-modal.modal2 size="sm" @click="details(item.item)">Details</b-btn>
<b-btn v-b-modal.modal3 size="sm" @click="details(item.item)">Details</b-btn>

<b-btn v-b-modal="'modal1'" size="sm" @click="details(item.item)">Details</b-btn>
<b-btn v-b-modal="'modal2'" size="sm" @click="details(item.item)">Details</b-btn>
<b-btn v-b-modal="'modal3'" size="sm" @click="details(item.item)">Details</b-btn>