Question

点击搜索后，我想刷新表格，这种情况发生了，这是桌子

methods: {
  init: function() {
    appTable = $('#tblApproval').DataTable({
      ajax : {
        url: '{{ Route("api_travel_app_list") }}',
        dataType: 'json',
        type: 'GET',
        cache: false,
        data: function(d) {
          d.period = appSearch.period;
          d.status = appSearch.status;
        },
        beforeSend: function(jqXHR, settings) {
          doLoading(true);
        },
        error: function(jqXHR, textStatus, errorThrown) {
          console.log("Text Status: " + textStatus + ", Error: " + errorThrown);
          swal(textStatus, errorThrown, "error");
        },
        complete: function(jqXHR, textStatus)  {
          doLoading(false);
        }
      },
      columns: [
        {
          data: null,
          render: function (data, type, row, meta) {
            return meta.row + meta.settings._iDisplayStart + 1;
          }
        },

这是错误代码

open: function() {
    $("#modalSearch").modal("show");
    this.fetchComboBoxData();
  },
  search: function() {
    if(appSearch.nik == ""){
      swal({
        imageUrl: "{{ asset('asset/img/icon/png/malware.png') }}",
        imageHeight: 110,
        text: 'NIK should not be empty',
        showCloseButton: true
      });
      return;
    }

    appTable.ajax.reload();
    $("#modalSearch").modal("toggle");

在这段代码中，我得到了Uncaught TypeError：无法读取未定义的属性'ajax'。

Answer 1

只需创建一个反应性属性并将其DataTable分配给它。

data: {
    appTable: null
}

或者如果它是组件，则使用功能代替

data: function() {
    return {
        appTable: null
    }
}

有关data属性的更多信息，您可以在这里阅读：https://vuejs.org/v2/guide/instance.html#Data-and-Methods

在您的init方法中，应将appTable = $('#tblApproval').DataTable替换为this.appTable = $('#tblApproval').DataTable。然后在您的search方法appTable.ajax.reload();中

if(this.appTable) {
    this.appTable.ajax.reload();
}
else {
    console.log('The data table was not loaded!');
}

很明显，应该在调用init之前初始化search函数。也许您应该将它放在created钩中。

created: function() {
    this.init();
}

有关生命周期挂钩的更多信息，您可以在这里阅读：https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

“无法读取未定义的属性'ajax”

1 个答案: