Vue对象的数据无法绑定到html页面弹出的模态框

问题描述：

在hmtl页面引入了模态框代码，并在其中指定了要绑定vue数据的id，接着在标签中定义了vue对象，指定了data数据和methods，但是弹出模态框后，通过@click等触发操作都无法调用vue对象里的methods，甚至data中的数据也无法在模态框中渲染。

分析

网上百度了很多方法，问题的根源是页面上下文不匹配，即层面不同导致的，在页面的标签定义的属于父级页面的，在弹出模态框时，又开启了子级页面，故vue无法绑定。

解决

vue对象定义位置错误，应在模态框属性设置为’show’的前一行代码处定义，由于我的实现是点击响应jquery函数，然后函数中通过$(’#locationSelectModel’).modal(‘show’);弹出模态框，故在该行代码之前定义vue对象

ps：

以上见解如有错误或不当之处，还请各位指出，感谢