Question

我正在使用旧版应用程序。根据XHR请求，后端提供一些包含多个Vue组件的HTML。我正在尝试编译 Vue组件并在原始页面上显示HTML。这很好当返回的HTML仅包含一个Vue组件但失败时当它包含多个组件时。

下面是一个JS小提琴来说明问题：https://jsfiddle.net/o8vfsepj/4/

Vue代码：

Observable.fromIterable(stringList).filter(x -> x.contains(RANDOM_TEXT))

和原始页面，带有触发后端请求的按钮，以及用于显示结果的动态Vue组件：

var myCounter = {
    data: function() { return { count: 0 } },
  methods: {
    increment: function() {
      this.count = this.count + 1;
    }
  }

};

new Vue({
  el: "#app",
  data: {
    loadedItem: '',
    rawHtml: '',
  },
  methods: {
    loadItems: function() {
        // XHR request sends back some html containing vue components:
      this.rawHtml = '<div><h4>First counter</h4><component-counter><button type="button" v-on:click="increment">increment</button> {{ count }}</component-counter></div><div><h4>Second counter</h4><component-counter><button type="button" v-on:click="increment">increment</button> {{ count }}</component-counter></div>';

      let compiledHtml = Vue.compile(this.rawHtml);
      let methods = myCounter.methods;
      let data = myCounter.data;
      let component = Object.assign({}, compiledHtml, { methods }, { data });

      this.loadedItem = component;

    }
  },
  components: {
    'component-counter': myCounter,
  }
});

rawHtml包含两个计数器；编译并添加方法后和数据，并在页面中显示结果对象，第一个计数器出现并正常工作，但第二个计数器不存在。

让后端发送回整齐地切成JSON数组的HTML 这样每个组件都已经隔离了，可惜不是一个选择，因为比示例中的标记要多得多，并且标签的关闭不正确等编译时搞砸了。

（我知道这不是用Vue做事的正确方法）

具有多个Vue.js组件的编译模板

0 个答案: