Vue公司SPA：API請求後編制追加HTML

Question

使用：

• Vue的路由器SPA網頁渲染
基於
• 的JQuery網格渲染庫（劍道UI）

使用案例：

• Vue呈現所有組件，但網格由此外部庫呈現。
• 當有人點擊一行時，一個新的Vue組件需要被追加到作爲一個「細節組件」。

問題：

• 由於網格由這個外部庫渲染後的Vue已經完成，追加<detail-component></detail-component>標籤的DOM不會做任何事情。

如何在稍後手動重新編譯/重新呈現此「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

得到它的工作！該網格有一個detailInit選項，我們可以將其定義爲創建和安裝詳細vue組件。

我希望這可以幫助別人。

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>' 
 
    }); 
 
    } 
 
    
 
});

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