时间戳

首页 > 解决方案 > 渲染 vueJs 后重新编译模板

jquery - 渲染 vueJs 后重新编译模板

问题描述

我正在使用带有 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指令而不编译它

数据表组件模板

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

提前致谢

标签： jqueryvue.jsdatatablerecompile

解决方案

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

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

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

推荐阅读