渲染 vueJs 后重新编译模板

Posted 2023-02-22

【中文标题】渲染 vueJs 后重新编译模板

【英文标题】：reCompile template after rending vueJs

【发布时间】：2019-01-29 16:03:30

【问题描述】：

我正在使用带有 vueJs 的数据表 jQuery 插件，但是当我使用数据表的渲染功能时遇到问题。如果我将 vueJs 代码放在里面，比如@click，它不会被解释，我在源代码中看到 @click 并没有发生任何事情。

我创建了一个组件 Datatable 并像这样实例化

<Datatable v-if="!loading" :source="source" :columns="columns" :searching="searching"></Datatable>

source 是这样的数组

[["1","138","415-CS-92","8","1"],["1","138","415-CS-92","8","1"]]

columns 是这样的数组

[
       title: "foo" ,
       title: "foo2" ,
       title: "foo3" ,
       title: "foo4" ,
       title: "foo5" ,
        render: function(data, type, row, meta) 
          return '<a @click="test">' + data +' <i class="fa fa-edit "></i></a>';
        
      
    ]

问题就在这里，渲染函数返回@click指令而不编译它

Datatable组件的模板

<template>
 <div>
   <table class="display" style="width:100%">
   </table>
 </div>
</template>

脚本：

  export default 
  props: ['source', 'columns', 'searching'],
  data () 
    return 
      datatable: 
    
  ,
  mounted: function () 
    var the = this
    the.$nextTick(function () 
      this.datatable = $($(this.$el).find('table')).DataTable(
        data: the.source,
        columns: the.columns,
        searching: the.searching
      );
    )
  ,
  watch: 
    'source': 
      handler: function(val, oldVal) 
        var the = this
        the.$nextTick(function () 
          this.datatable.destroy()
          this.datatable = $($(this.$el).find('table')).DataTable(
            data: the.source,
            columns: the.columns,
            searching: the.searching
          );
        )
      ,
      deep: true
    
  

提前致谢

【参考方案1】：

jQuery DataTables 不是 Vue 原生组件；因此，它不是被动的。这意味着您无法连接代码中显示的“@click”事件。 （除非您在创建阶段执行此操作，否则这可能是导致此问题的原因，您无法在后续阶段重新连接事件。）

（无耻插件）查看我的 Vue 组件示例，了解如何使用data-action 属性处理点击：https://github.com/niiknow/vue-datatables-net

它使用 jQuery 处理点击，然后将事件（名称定义为 data-action 属性）传播/$emit 到 Vue 组件。