Vue SPA: Compile appended HTML after API request

Question

Using:

• Vue Router for SPA page rendering
• JQuery based Grid render library(Kendo UI)

Use case:

• Vue renders all components but the grid, which is rendered by this external library.
• When someone clicks on a row, a new Vue component needs to be appended to the DOM, as a "detail component".

Problem:

• Since the grid is rendered by this external library after Vue has already finished, appending a <detail-component></detail-component> Tag to the DOM won't do anything.

How can I re-compile/re-render this "HTML component Tag" manually later?

Code:

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

Got it to work! The grid has a detailInit option and we can define it as creating and mounting a detail vue component.

I hope this helps someone else.

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>