v-for内的回收模态

Question

我正在尝试使用bootstrap- value模态内部循环，类似:

<b-list-group-item v-for="item in items" :key="item">
<b-button v-b-modal.example-modal>{{ item }}</b-button>
<b-modal id="example-modal">
<p>{{ item }}</p>
</b-modal>
</b-list-group-item>

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

这里的问题是，每当我点击一个按钮，它打开7模态(每个人都在循环)。例如，如果我点击按钮包含3，它打开所有模态1到7。我怎么能只调用被点击的模态呢

为方便起见，这里是codesandbox链接:https://codesandbox.io/s/naughty-knuth-4q82p?file=/src/components/HelloWorld.vue: 264 - 396

注意，我需要在循环中使用模态，因为我必须将一些数据传递给与v-for相关的模态。谢谢你的提前!

Answer 1

您可以通过两种方式做到这一点，我建议使用单个<b-modal>，而不是分配"clicked"项设置为数据属性，该属性可用于显示所需的信息。

单模态示例

new Vue({
el: "#app",
data() {
return {
items: [1, 2, 3, 4, 5, 6, 7],
selectedItem: null
}
}
})

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue@2.6.2/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-list-group-item v-for="item in items" :key="item">
<b-button v-b-modal.example-modal @click="selectedItem = item">{{ item }}</b-button>
</b-list-group-item>
<b-modal id="example-modal">
<p>{{ selectedItem }}</p>
</b-modal>
</div>

---

另一种方法非常简单，它使用在v-for中生成的多个<b-modal>。你给每个模态一个唯一的ID，然后在v-b-modal指令中使用该ID。

多模态示例

new Vue({
el: "#app",
data() {
return {
items: [1, 2, 3, 4, 5, 6, 7]
}
}
})

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue@2.6.2/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-list-group-item v-for="item in items" :key="item">
<b-button v-b-modal:[`example-modal-${item}`]>{{ item }}</b-button>
<b-modal :id="`example-modal-${item}`">
<p>{{ item }}</p>
</b-modal>
</b-list-group-item>
</div>