更換整個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').replaceWith(result.content);

一旦發生這種情況，則vue.js插件停止響應於v-on click事件處理程序：在一些情況下，整個#main-container經由傳統的jquery AJAX方法如下替換。

有關如何解決此問題的任何建議？

Answer 1

您遇到的問題是，如果您替換整個容器，那麼組件標記將被刪除。你如何解決這取決於你的遺留代碼，如果它注入與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/