Javascript 如何在加载页面后注入的HTML中使用VueJS？

我们正在将传统前端迁移到VueJS 2。到目前为止，它使用HTML和JS获取模态并将它们注入DOM。我们想迁移一种特定的（非常简单的）模式

该模式是重置密码模式。目前，它是使用遗留逻辑（这是一个本机onclick调用）从登录模式获取的。我们希望登录模式与VueJS交互并显示重置密码模式

但问题是，当我们最初加载HTML时，登录模式不在DOM中（直到我们显示它）。看来VueJS事件处理程序根本不会触发

如何在加载页面后注入的登录模式中使用VueJS

下面是一些伪代码来说明我的问题：

# OLD
// HTML
<!-- Button displaying the login modal -->
<button onclick="displayModal('login')">Log in</button>

<!-- Login modal (loaded only when user clicks the button) -->
<div>
    <h1>Login</h1>
    <button onclick="displayModal('reset-password')">Reset password</button>
</div>

// Native JS
function displayModal(name) {
    var result = fetchModal(name);
    removeCurrentModal();
    injectModal(result);
}

# NEW
// HTML
<!-- Login modal (loaded only when user clicks the button) -->
<div>
    <h1>Login</h1>
    <!-- This doesn't do anything even though it works when it exists on page load instead -->
    <button @click="modals.passwordReset.show = true">Reset password</button>
</div>

#旧
//HTML
登录
登录
重置密码
//原生JS
函数displayModal（名称）{
var result=fetchModal（名称）；
removeCurrentModal（）；
结果；
}
#新的
//HTML
登录
重置密码

我不确定这是否可行。你是使用Vue2还是Vue3？谢谢你的评论，我使用Vue 2。为什么你需要事件处理程序在装载之前工作？你的意思是当登录模式打开时，点击事件就不会触发吗？@Daniel_Knights当然可以，但登录模式是遗留代码，我们想先迁移一个更简单的模式。我想只移植显示部分就行了，但这意味着也要移植其他模式，因为登录模式可以显示这些模式！谢谢你的帮助。我不确定这是否可行。你是使用Vue2还是Vue3？谢谢你的评论，我使用Vue 2。为什么你需要事件处理程序在装载之前工作？你的意思是当登录模式打开时，点击事件就不会触发吗？@Daniel_Knights当然可以，但登录模式是遗留代码，我们想先迁移一个更简单的模式。我想只移植显示部分就行了，但这意味着也要移植其他模式，因为登录模式可以显示这些模式！谢谢你的帮助。