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

【问题标题】：Vue SPA: Compile appended HTML after API requestVue SPA：在 API 请求后编译附加的 HTML
【发布时间】：2017-04-18 07:56:47
【问题描述】：

使用：

用于 SPA 页面渲染的 Vue 路由器
基于 JQuery 的网格渲染库（剑道 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>

【问题讨论】：

您能否添加相关的代码片段，您的渲染方式、方法等？

标签： vue.js vue-component vue-router

【解决方案1】：

让它工作！网格有一个detailInit 选项，我们可以将其定义为创建和挂载一个detail 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>

【讨论】：