替換整個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>

這一切都很完美，我的數據綁定和自定義方法沒有任何問題。

但是， #v-container元素包含在另一個名為#main-container元素#main-container 。 在某些情況下，整個#main-container被遺留的jquery ajax方法替換如下：

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

一旦發生這種情況，vue.js小部件就會停止響應v-on click事件處理程序。

有關如何繞過這個的任何建議？

Answer 1

您遇到的問題是，如果替換整個容器，則將刪除組件標記。 你如何解決這個問題取決於你的遺留代碼，如果它注入一個帶有id的div ，那么你可以簡單地append它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/