ajax 加载后重新初始化 Vuejs2

Question

Have looked around and can't find a solution for this.

I have a .vue file which is loaded on a page, and the user can click a button which causes an ajax load on the page which replaces some content (including where the vue component is displayed).

The ajax call happens outside of Vue, replacing content which includes the vue component.

Once the ajax completes, the Vue component doesn't display. Is there a way I can manually re-initialise Vue?

Thanks

Answer 1

It's probably not the best way, but it works just creating a new Vue instance (there might be a reason not to do this, I don't use Vue much).

I've done a short test here: https://jsfiddle.net/yazbx35d/

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
});

$('#app').empty().append($('<p></p>', {
    text: '{{newMessage}}'
}));

new Vue({
  el: '#app',
  data: {
    newMessage: 'Hello again Vue.js!'
  }
});

Answer 2

From what I understand, you could create a separate Vue instance as an Event Bus , emit an event using it when the ajax call completes. Listen for the event inside the component or main Vue instance and update the component.

Create the bus:

var bus = new Vue()

When your ajax call resolves:

bus.$emit('update', 1)

Inside your main Vue instance/component:

bus.$on('update', function (id) {
  // ...
})