Javascript AJAX部分加载后的Vue绑定？

我刚刚开始使用Vue.js，并试图将其整合到我已经开发了一段时间的应用程序中。我的应用程序是使用Laravel、相当数量的jQuery等构建的

我的应用程序中的所有导航元素都使用AJAX（而不是Vue）返回部分视图。因此，任何内部链接或表单提交都是通过AJAX提交到一个Laravel路由，该路由返回部分链接

我已经设置了第一个Vue实例，但它仅在访问者第一次访问使用Vue实例的页面时绑定到元素。Vue实例仍然存在，但当用户离开页面时，它会松开与元素的绑定，然后再回来——可能是因为当用户离开页面时，元素已从DOM中删除

如何让Vue在返回DOM时绑定回元素（通过Vue不执行的AJAX加载）

My main.js（被Elixir/Browserify消费）：

Status.js

var Vue = require('vue');
Vue.use(require('vue-resource'));

module.exports = new Vue({
    el: '#app',

    data: {
        message: ''
    },

    ready: function() {
        this.message = 'loading ...';
    },

    methods: {
        setMessage: function(message) {
            this.message = message;
        },

        getStatus: function(url, data) {
            this.message = 'loading ...';
            this.$http.get(url, data)
                .success(function(result) {
                    console.log('Status get success');
                    this.setMessage(result);
                })
                .error(function() {
                    console.log('Status get error');
                    this.setMessage('Error');
                });
        }
    }
});

正在使用的代码是通过AJAX返回的部分/模板

@extends('layouts.partials.content')


@section('content')
    <div id="app">
        <pre>@{{ $data | json }}</pre>
    </div>
@stop

@section('javascript')
<script type="text/javascript" class="document-script">
$(function()
{
    var href ...
    var data {...}

    MaintenanceStatus.getStatus(href, data);
});
</script>
@stop

@extends（'layouts.partials.content'））
@节（“内容”）
@{{$data | json}
@停止
@节（“javascript”）
$（函数（）
{
var href。。。
变量数据{…}
MaintenanceStatus.getStatus（href，data）；
});
@停止

请注意，它可以在整页刷新时工作，但如果我导航到另一页（这也是一个AJAX调用），然后我返回到此视图，我只看到{{$data | json}}。。。Vue似乎已失去与app元素的绑定。我怎么把它拿回来

我尝试将Vue实例绑定到一个从未离开DOM的元素，然后创建了一个组件，但得到了相同的结果。。。该组件在整页刷新时呈现，但在通过AJAX加载部分内容时不呈现

---

我还尝试过摆弄.mount，但没有效果。

下面是一个示例，说明了一种可以实现您想要的功能的方法，但我相信Vue的创建者不推荐这种方法：

父vue实例声明：

var newContent = $(response.new_content_html).wrap('<div></div>');

$('#some-container-for-the-dynamic-content').html(newContent);
var newContentInstance = window.vm.$addChild({ 
     el: '#some-container-for-the-dynamic-content', 
     data: function data() {
          return { emptyRecordData: {} };
     } 
});
newContentInstance.$mount();
newContentInstance.$data.someOtherData = response.some_other_data;

这一部分可能在ajax调用的成功函数中：

module.exports = function() { return new Vue({...}) }

var newContent=$（response.new\u content\u html）.wrap（“”）；
$（“#动态内容的一些容器”）.html（newContent）；
var newContentInstance=window.vm.$addChild（{
el:“#动态内容的一些容器”，
数据：函数数据（）{
返回{emptyRecordData:{}；
} 
});
newContentInstance.$mount（）；
newContentInstance.$data.someOtherData=response.some\u other\u数据；

我可以通过更改我的Status.js以返回一个闭包来实现这一点：

var MaintenanceStatus = window.MaintenanceStatus();

...

MaintenanceStatus.getStatus(href, data);

在通过ajax返回的部分脚本中，我能够创建一个新实例：

component = {
  activate: function (done) {
    var self = this
    loadDataAsync(function (data) {
      self.someData = data
      done()
    })
}

---

我建议您查看一下

激活

挂钩

从文档：

---

数据准备好后，基本上调用

done（）

。然后将插入组件

在ajax调用后尝试重新编译vue实例，当部分加载完成时，请参见我的回答：

var MaintenanceStatus = window.MaintenanceStatus();

...

MaintenanceStatus.getStatus(href, data);

component = {
  activate: function (done) {
    var self = this
    loadDataAsync(function (data) {
      self.someData = data
      done()
    })
}