Javascript 使用Vue侦听应用程序外部的DOM事件

我需要使用Vue.js逐步增强现有的服务器端渲染表单。我需要根据表单上另一个字段的值更改

的

在我看来，我无法在父元素

（或另一个父元素）上装载Vue，因为我丢失了需要维护的所有服务器端渲染内容

我已经安装了我希望动态的

。这使我可以根据自己的意愿动态生成

s。但是，另一个表单输入元素（挂载的

）现在不在我的Vue范围内。如何向我的Vue应用程序通知相关字段的更改，以便它相应地更新我的

s

据我所知，Vue有自己的事件系统，所以我必须自己连接一个DOM事件监听器——这完全可以。就我所知

---

旁白：我明白，考虑到无限的时间、金钱和资源，我应该遵循一种趋势，让我的整个用户体验成为一个SPA，以火箭发射器到钉子的方式解决这个问题。然而，这不是一个选择。我必须逐步增强SSR输出。

您仍然可以使用查询文档中的同级元素，并从Vue实例中调用：

const ALL_DATA=[
{id:1，值：1，文本：'One'}，
{id:2，值：2，文本：'Two'}，
{id:3，值：3，文本：'Three'}，
];
新Vue({
el:“#应用程序”，
数据：（）=>({
选项：[
…所有数据，
]
}),
安装的（）{
document.querySelector（“#选项类型”）.addEventListener（'change'，e=>{
开关（如目标值）{
偶数情况：
this.options=ALL_DATA.filter（x=>x.value%2==0）；
打破
“奇数”一案：
违约：
this.options=ALL_DATA.filter（x=>x.value%2！==0）；
打破
}
})
}
});
document.getElementById（'myForm'）。addEventListener（'submit'，e=>{
e、 停止传播（）；
e、 预防默认值（）；
});

即使
古怪的
{{o.text}}
我无法在父元素（或其他父元素）上装载Vue，因为我丢失了所有需要维护的服务器端呈现内容。
为什么？Vue不需要安装到空div。