javascript - 替换整个 vue.js 容器

Question

我有一个实例化如下的 vue.js 小部件:

var foo = new Vue({
    el: '#v-container',
    methods: {
        populate:function() {
            // some custom code
        }
    },
});

html 内容如下:

<div id="main-container">
  <lots of other HTML>
  <div id="v-container">
    <a href="#" v-on:click="populate">Foo</a>
  </div>
</div>

这一切都很完美，我的数据绑定(bind)和自定义方法也没有任何问题。

但是，#v-container 元素包含在另一个名为 #main-container 的元素中。在某些情况下，整个 #main-container 通过遗留的 jquery ajax 方法替换如下:

$('#main-container').replaceWith(result.content);

一旦发生这种情况，vue.js 小部件就会停止响应 v-on click 事件处理程序。

关于如何解决这个问题有什么建议吗？

Answer 1

您遇到的问题是，如果您替换整个容器，那么组件标记将被删除。你如何解决这个问题取决于你的遗留代码，如果它注入(inject)一个带有 id 的 div 那么你可以简单地 append 它在Vue 实例的 created() 方法:

// Get "v-container" content
var vContainer = $("#v-container").html();

// An ajax call to replace everything!
$("#main-container").replaceWith('<div id="legacy-container">I\'ve replaced everything</div>');

new Vue({
  el: "#legacy-container",
  created() {
    $("#legacy-container").append('<div id="v-container">'+vContainer+'</div>');
  }
});

这是 JSFiddle:https://jsfiddle.net/0ghL5u41/