Vue binding after partial AJAX loads?

Question

I am just starting out with Vue.js and trying to incorporate it into the application that I have been building for a while. My application is built using Laravel, enough jQuery, etc.

All of my navigational elements in my application use AJAX (not via Vue) to return partial views. Thus, any internal link or form submission is sent via AJAX to the Laravel route, which returns a partial one.

I installed my first Vue instance, but it is only attached to the element when the visitor first gets to the page where the Vue instance is used. The Vue instance still exists, but it loses its binding to the element when the user navigates from the page and then returns - presumably because the element was removed from the DOM when the user was moving.

How do I get Vue to bind to an element when it returns to the DOM (via an AJAX load that Vue is not executing)?

My main.js (consumed by 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'); }); } } }); 

Consumption code that is partial / template that is returned via 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 

Please note that it works when the page is completely refreshed, but if I go to another page (again, that is an AJAX call), then I will go back to this view, I just see {{$ data | json}} ... Vue seems to have lost its binding to the application element. How do I get it back?

I tried to bind a Vue instance to an element that never leaves the DOM, and then created the component, but I get the same result ... the component is displayed on a full page refresh, but not when partial loading is done through AJAX.

I also tried to team up with. $ mount, but this did not affect.

Answer 1

I recommend you take a look at the activate hook here .

From the doc doc:

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

Basically calling done() when the data is ready. Then the component will be inserted

Answer 2

Here is an example of one way to do what you want, but I believe that this is not recommended for the creator of Vue:

Parent vue instance declaration:

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

This part may be in the success function of your ajax call:

 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

I managed to get this working by changing my Status.js to return a close:

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

And in the script part of the part that is returned using ajax, I can create a new instance:

 var MaintenanceStatus = window.MaintenanceStatus(); ... MaintenanceStatus.getStatus(href, data);