Question

环顾四周，无法找到解决方案。

我有一个.vue文件加载到页面上，用户可以单击一个按钮，该按钮会在页面上加载ajax，替换某些内容（包括显示vue组件的位置）。

ajax调用发生在Vue之外，取代了包含vue组件的内容。

ajax完成后，Vue组件不会显示。有没有办法可以手动重新初始化Vue？

由于

Answer 1

它可能不是最好的方法，但它只是创建一个新的Vue实例（可能有理由不这样做，我不会多使用Vue）。

我在这里做了一个简短的测试：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

根据我的理解，您可以创建一个单独的Vue实例作为Event Bus，在ajax调用完成时使用它发出一个事件。侦听组件或主Vue实例中的事件并更新组件。

创建总线：

$ionicPlatform.ready()

当您的ajax呼叫解决时：

var bus = new Vue()

在主Vue实例/组件中：

bus.$emit('update', 1)

在ajax加载后重新初始化Vuejs2

2 个答案: