Bootstrap Vue modal 的零星问题



我对Bootstrap Vue Modal有一个零星的问题。

我对 Vue 没有经验,由于我与项目所有者的协议,我无法显示整个代码,而且,无论如何都要显示太多代码,所以我会解释这个问题。我希望得到一些提示,看看问题可能是什么,因为我没有想法。所以,这是我遇到的项目信息和问题:

我创建了一个活动日历。

日历显示月份格式,每天内部列出事件。

我在 Vue 实例数据部分存储了年、月和日变量。

我创建了一个设置日历的方法(setCalendar: function (year, month))。

我使用"created"将年,月和日设置为加载页面和初始化vue并设置日历的当前日期。

我创建了上一个和下一个按钮以及下一个和上一个函数,单击时,函数会相应地扣除(月--)或添加(月++),并设置年,月和设置日历(setCalendar)。

我为每个<b-link>创建了<b-link v-b-modal="event.today_date + '-' + (index)">和相关模态<b-modal :id="event.today_date + '-' + (index)" :title="event.event_title">

当页面最初加载时,模态的链接可以完美运行,但例如,如果我单击"上一步"按钮并加载 6 月的日历和事件,然后单击"下一步"按钮返回 7 月日历和事件,则会有一两个 7 月<b-link>链接到 6 月模态,其余<b-link>7 月工作正常。因此,当我加载 6 月日历和事件并返回 7 月日历和事件时,大约 10% 的 7 月 b 链接链接到 6 月模态,当然当我单击这些 b 链接时,它不会加载模态,因为这些模态在 7 月日历中不存在。

我可以使用 Vue 开发工具看到这一点。当我单击一个 无工作<b-link>,它链接到上个月或下个月的模式。这仅影响 10% 的 b 链接,并且仅在我加载上个月或下个月日历时发生。

如果有人能给我一个关于导致这种情况的原因的线索,我将不胜感激。

@Bert有了正确的答案并解决了这个难题。 我为所有b-linkb-modal使用了独特的key,一切都开始正常工作。

最新更新