在使用vuetify时，在v-for循环中使用v-dialog会覆盖除最后一个v-dialog以外的所有其他的click事件 [英] using a v-dialog in a v-for loop overwrites click event for all but last v-dialog when using vuetify

问题描述

我有一个在 v-for 循环中使用 Vuetify v-dialog 的应用程序.但是，尽管单独的激活器组件在每个 v-dialog 中都能正确呈现，但是当我单击其中一个芯片时，它会发出最后一个 v-chip 的click事件，无论我单击什么芯片.

I have an app that is using a Vuetify v-dialog in a v-for loop. However, although the separate activator components render correctly within each v-dialog, when I click on one of the chips it emits the click event for the last v-chip regardless of what chip i click on..

好像所有 v-dialogs 都使用相同的click事件来提交来自最后一个 v-chip 的数据.

It is as though all the v-dialogs are using the same click event to submit the data from the last v-chip.

为什么在单击芯片时没有调用每个 v-dialog 的相应click事件?

Why is the corresponding click event for each v-dialog not being invoked when a chip is clicked?

演示: https://codepen.io/deftonez4me/pen/ExyQRxB

推荐答案

只使用对象而不是数组，然后将 removeTagDialogs [removeTagDialogs.indexOf(tag.id)] 替换为 removeTagDialogs[tag.id] 在两个地方.

Just use an object instead of an array and replace removeTagDialogs[removeTagDialogs.indexOf(tag.id)] with removeTagDialogs[tag.id], in both places.

查看其工作原理: https://codepen.io/andrei-gheorghiu/pen/WNxMyMa

这篇关于在使用vuetify时，在v-for循环中使用v-dialog会覆盖除最后一个v-dialog以外的所有其他的click事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！