使用vue.js访问远程模态内部的元素

Question

我通过vue.js文档阅读，但我对如何加载部分并将其绑定到vue实例感到困惑。

作为一个例子，使用bootstrap的js，我可以像这样加载一个远程模式：

<a href="{{URL::to('retention/modals/campaign')}}" data-toggle="modal" data-target="#modal" class="btn btn-warning">Add New Campaign</a>

这会加载我

的部分内容

<div id="modal></div>

使用vue，我已经将模态作为一个组件，并且部分将加载，但是我无法将部分元素绑定到vue实例。所以模态中的任何事件，如

v-on:click.prevent="say('hi')" 

无效。

如何在创建vue实例后绑定添加到页面的元素？

Answer 1

您可以使用$mount

父vue实例声明：

var vm = new Vue({...})

新实例:(在动态内容加载到容器后运行）

var newContentInstance = vm.$addChild({ 
     el: '#modal', 
     data: function data() {
          return { something: '' };
     } 
});
newContentInstance.$mount();