如何将动态数据传递到单个引导vue模态实例，并在循环中多次重用它

Question

我正试图将数据传递到单个模态实例，并在循环中多次重用它。它正在工作，但每当我点击图像时，我都会收到一个错误-You may have an infinite update loop in a component render function.

这是一个html，我在其中循环一个图像数组，并将其传递给一个模态实例。

<li v-for="(source, i) in sources()" :key="i+'K'">
<span v-b-modal.fancybox @click="fancyBox(source)">
<p>click me</p>
</span>
</li>

这是引导vue模式的html-

<b-modal
id="fancybox"
:modal-class="myclass"
hide-footer
centered
>
<img class="fancybox" :src="resource">
</b-modal>

以下是vue-js代码-

export default {
data: () => ({
myclass: ['myclass'],
srcItems: [],
resource: ''
}),
methods: {
sources () {
this.srcItems = [
'https://picsum.photos/id/0/5616/3744',
'https://picsum.photos/id/1/5616/3744',
'https://picsum.photos/id/10/2500/1667',
'https://picsum.photos/id/100/2500/1656',
'https://picsum.photos/id/1000/5626/3635'
]
return this.srcItems
},
fancyBox (source) {
this.resource = source
}
}
}

我搞不清楚这里出了什么问题！请帮帮我。谢谢你抽出时间。

Answer 1

希望这将帮助您开始

**[LIVE DEMO](https://codepen.io/boussadjra/pen/xxERwZm)**