主播渲染后的reCompile模板

Question

我正在使用带有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"]]

列是如下所示的数组

[
      { 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>';
        }
      }
    ]

问题就在这里，render函数返回@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
    }
  }
}

提前感谢

Answer 1

jQuery DataTables不是Vue原生组件；因此，它不是响应式的。这意味着您不能像代码中所示那样连接“@click”事件。(除非您在创建阶段执行此操作，这可能是导致此问题的原因，因为您无法在以后的阶段重新连接事件。)

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

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