使用 vue.js 访问远程模式中的元素答案

【问题标题】：Access elements inside of a remote modal with vue.js使用 vue.js 访问远程模式中的元素
【发布时间】：2016-03-03 09:36:57
【问题描述】：

我阅读了 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，我将 modal 设为组件，并且将加载部分，但我无法将部分的元素绑定到 vue 实例。所以模态内的任何事件，例如

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

不会工作。

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

【问题讨论】：

标签： bootstrap-modal vue.js

【解决方案1】：

你可以使用$mount

父vue实例声明：

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

新实例：（在将动态内容加载到您的容器后运行此实例）

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

【讨论】：