Vue.js 如何拦截引导程序；“数据目标”；事件

对问题的详细阐述：

          <span
            class="float-right text-muted smaller-font make-clickable"
            data-toggle="modal"
            :data-target="reportModalIdWithHash"
            v-on:click="checkForLogin()"
          >
            Report
          </span>

我使用的是一个引导模式对话，我只希望在用户登录时它能正常工作

虽然vue.js可以在用户未登录或处理任何类型的链接时使此元素完全消失，但“数据目标”给我带来了麻烦

目标：在激活modal之前检查用户是否已登录。如果用户没有登录，我会在代码中的其他地方处理它（这里的细节与这个问题无关，但涉及激活一个完全独立的模式）

如果用户已登录，则允许通过“数据目标”激活模式

问题：当前，当用户未登录时，“reportModalIdWithHash”在 'checkForLogin（）'

代码：

          <span
            class="float-right text-muted smaller-font make-clickable"
            data-toggle="modal"
            :data-target="reportModalIdWithHash"
            v-on:click="checkForLogin()"
          >
            Report
          </span>

报告

关于首选解决方案的说明：

          <span
            class="float-right text-muted smaller-font make-clickable"
            data-toggle="modal"
            :data-target="reportModalIdWithHash"
            v-on:click="checkForLogin()"
          >
            Report
          </span>

我希望在模式被“数据目标”触发之前发生“checkForLogin（）”

虽然我总是可以使用Vue.js使元素显示，但我希望用户看到该选项，然后当他们单击该选项时，如果他们没有登录，则显示登录名而不是报告模式

---

可以拦截并重新发射“数据目标”吗？

为什么不使用动态

数据目标

:data-target="`#${isLoggedIn ? 'fancy' : 'login'}-modal`"


newvue({
el:“#应用程序”，
数据：（）=>({
伊斯洛格丁：错
}),
方法：{
handleLogin（）{
//将此替换为异步API调用。。。
this.isLoggedIn=true；
//和切换模态。。。
['fancy'，'login'].forEach（name=>$（`#${name}-modal`.）.modal（'toggle'）；
}
}
})

isLoggedIn
（单击以更改）
登录模式
&时代；
登录模式内容在这里

取消
登录
花里胡哨的报道
&时代；
这里有一篇精彩的报道

无聊的。。。
好啊
tao，谢谢你的回答；我尝试了一些变体，但我认为如果我放弃这个初始模式并使它与我的另一个保持一致，那么最终代码将更易于维护。这个模式是我第一次尝试的模式之一，后来我选择了一个Vue.js模式，这样可以产生更干净的代码。这是一个进行必要重构的机会。