Javascript 绑定不带'；数据属性尚未存在

我们在应用程序中使用所有对话框消息。我在其中一个对话框中有一个输入，用于筛选项目列表

在我的Vue实例中，我希望侦听数据属性的更改

问题是，当我在输入框中键入更改时，Vue无法获取更改。我认为这是因为在Vue初始化之后，输入被添加到DOM中

我将如何处理此问题，以便我的Vue实例可以侦听输入更改？我已经尽了最大努力，以下面代码段中最简单的形式重新创建了这个场景

newvue({
el:“#应用程序”，
数据：{
筛选器：“”
},
方法：{
openModal:function（）{
vex.dialog.open({
输入：[
“过滤器”，
'',
“{{filter}}
”
].加入（“”）
})
}
}
})

开放模态

问题在于，您正在向

vex.dialog.open

方法提供字符串形式的纯html。Vue不会知道您已经这样做了，因此这些字符串中包含的任何Vue语法都不会被解释为Vue组件定义中的语法

您应该做的是为该输入创建一个Vue组件，然后通过引用将该输入的元素传递给

vex.dialog.open

方法。这样，Vue将在对话框中使用模板之前编译该模板

下面是一个简单的例子：

Vue.component（'my-input'{
模板：`
滤器
{{filter}}

`,
数据（）{
返回{
筛选器：“”
}
}
});
新Vue({
el:“#应用程序”，
数据（）{
返回{
莫达洛佩：错
}
},
方法：{
openModal（）{
vex.dialog.open({
输入：此。$refs.input。$el
});
this.modalOpened=true；
}
}
})

开放模态

完美！这正是我想要的：一个干净优雅的解决方案。非常感谢！