AJAX部分加载后的Vue绑定？

Posted 2023-02-22

【中文标题】AJAX部分加载后的Vue绑定？

【英文标题】：Vue bind after AJAX partial loads?

【发布时间】：2016-02-27 08:47:08

【问题描述】：

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

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

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

当元素返回 DOM 时，如何让 Vue 绑定回元素（通过 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，但没有效果。

【问题讨论】：

尝试在您的 ajax 调用和部分加载完成后重新编译您的 vue 实例，请在此处查看我的答案：***.com/questions/30546370/…

【参考方案1】：

我建议你看看activate 钩子here。

来自文档：

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

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

【参考方案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;

【参考方案3】：

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

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

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

var MaintenanceStatus = window.MaintenanceStatus();

...

MaintenanceStatus.getStatus(href, data);