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将通过遗留jquery ajax方法替换，如下所示：

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

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

有关如何解决这个问题的任何建议吗？

Answer 1

您遇到的问题是，如果更换整个容器，则会删除组件标记。如何解决此问题取决于您的遗留代码，如果它为menu注入div，那么您可以在id方法中append简单地created() Vue实例：

// 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/

替换整个vue.js容器

1 个答案: