Вьет SPA: Компиляция прилагаемого HTML после запроса API

Question

Использования:

• Вьет маршрутизатор для SPA страницы рендеринга
• JQuery на основе сетки визуализации библиотеки (Kendo UI)

Используйте случай:

• Vue отображает все компоненты, но сетку, которая отображается этой внешней библиотекой.
• Когда кто-то нажимает на строку, новый компонент Vue должен быть добавлен в DOM, как «компонент детали».

Проблема:

• Поскольку сетка оказываемая внешней библиотеки после того, как 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>