Question

使用：

用于SPA页面呈现的Vue路由器
基于JQuery的网格渲染库（Kendo UI）

用例：

Vue渲染除网格外的所有组件，该网格由此外部库呈现。
当有人点击某行时，新的Vue组件需要追加到DOM，作为“详细信息组件”。

问题：

由于在Vue完成后网格由此外部库呈现，因此向DOM添加<detail-component></detail-component>标记将不会执行任何操作。

如何稍后手动重新编译/重新呈现此“HTML组件标记”？

代码：

Vue.component('grid-component', {
  template: '<div><p>Im the Component with the grid</p><div id="grid"></div></div>'
})

Vue.component('detail-component', {
  template: '<div><p>Im the detail component</p></div>'
})


new Vue({
  el: '#example',
  
  mounted: function() {
    $('#grid').kendoGrid({
      dataSource: [
        {field1: 'a', field2: 'b'},
        {field1: 'c', field2: 'd'},
        {field1: 'e', field2: 'f'}
      ],
      columns: [
        {field: 'field1', title: 'Field-1'},
        {field: 'field2', title: 'Field-2'}
      ],
      detailInit: function(e) {},
      detailTemplate: '<p>detail-component doesnt get rendered</p><detail-component></detail-component>'
    });
  }
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.1.1/vue-router.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.blueopal.min.css" />

<div id="example">
  <grid-component></grid-component>
</div>

Answer 1

搞定了！网格有Vue.component('grid-component', { template: '<div><p>Im the Component with the grid</p><div id="grid"></div></div>' }) var detailComponent = Vue.component('detail-component', { template: '<div><p>Im the detail component</p></div>' }) new Vue({ el: '#example', mounted: function() { $('#grid').kendoGrid({ dataSource: [ {field1: 'a', field2: 'b'}, {field1: 'c', field2: 'd'}, {field1: 'e', field2: 'f'} ], columns: [ {field: 'field1', title: 'Field-1'}, {field: 'field2', title: 'Field-2'} ], detailInit: function(e) { new detailComponent().$mount('#detail-row'); }, detailTemplate: '<div id="detail-row"><p>detail-component doesnt get rendered</p><detail-component></detail-component></div>' }); } });选项，我们可以将其定义为创建和安装详细的vue组件。

我希望这有助于其他人。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.1.1/vue-router.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.blueopal.min.css" />

<div id="example">
  <grid-component></grid-component>
</div>

bundles.<vendor-bundle>.prepend

Vue SPA：在API请求后编译附加的HTML

1 个答案: