Question

我正在将数据表jQuery插件与vueJs一起使用，但是在使用数据表的render函数时遇到问题。如果我将vueJs代码放在内部（如@click），则不会被解释，并且在源代码@click中看到没有任何反应。

我创建一个组件数据表，并以这种方式实例化

<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"]]

and列是这样的数组

[
      { 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指令而不进行编译

数据表组件模板

<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属性）传播/ $发送到Vue组件。

租借vueJ后重新编译模板

1 个答案: