Question

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

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

我已经设置了我的第一个Vue实例，但它只在访问者第一次访问使用Vue实例的页面时绑定到该元素。 Vue实例仍然存在，但当用户离开页面然后返回时，它失去了它与元素的绑定 - 可能是因为当用户导航时元素已从DOM中删除。

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

我的main.js（由Elixir / Browserify消费）：

window.MaintenanceStatus = require('./components/Status.js');

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

请注意，它适用于整页刷新，但如果我导航到另一个页面（再次是一个AJAX调用），那么我将返回此视图，我只看到{{$ data | json}} ... Vue似乎已经失去了它与app元素的绑定。我如何取回它？

我尝试将Vue实例绑定到一个永远不会离开DOM的元素，然后创建了一个组件，但是得到了相同的结果......组件在整页刷新时呈现，但是当通过AJAX加载部分时没有

我也尝试过使用。$ mount，但这没有效果。

Answer 1

我建议您查看activate挂钩here。

来自Doc：

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

数据准备好后，基本上调用done()。然后将插入组件

Answer 2

以下是一种做你想做的事情的例子，但我相信Vue的创造者不推荐这样做：

父vue实例声明：

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

这部分可能是你的ajax调用的成功函数：

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;

Answer 3

我能够通过更改我的Status.js来返回闭包来实现这个目的：

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

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

var MaintenanceStatus = window.MaintenanceStatus();

...

MaintenanceStatus.getStatus(href, data);

AJAX部分加载后Vue绑定？

3 个答案: