javascript - Vuejs Sweetalert 未捕获类型错误

Question

当函数 this.fetchReports 被调用时，我遇到了 Uncaught TypeError: this.fetchReports is not a function 错误，看来我可以从swal 对象，我怎样才能使这个函数全局化？我正在使用 Vuejs 和 SweetAlert，这是我的代码。

methods: {
  fetchReports: function () {
    this.$http.get('/reports/vueGetRequest', function (reports) {
      this.$set('reports', reports);
      //this.reports = reports;
    })
  },
  sortBy: function (ordenarpor) {
    this.reverso = (this.ordenarpor == ordenarpor) ? !this.reverso : false;
    this.ordenarpor = ordenarpor;
  },
  //Borrar usuario
  borrarUsuario: function (id) {
    // this.initial.id = 'borrar_confirmation';
    // this.initial.appendChild(this.texto_confirmation);
    // this.container = this.initial.textContent;
    // this.container = this.initial.id;

    swal({
      title: "Desea borrarlo?",
      text: "Una vez borrado no se podra recuperar",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: 'si',
      closeOnConfirm: false
    }, function (isConfirm) {
      //swal("Eliminado!", "Ha sido eliminado exitosamente!!", "success");
      if (isConfirm) {
        //this.$http.post('/reports/vueGetRequest' , id);
        Vue.http.post('/reports/vueGetRequest', id);
        // refresh the page una vez eliminado
        this.fetchReports();
        swal("Eliminado!", "Ha sido eliminado correctamente!!.", "success");
      } else {
        swal("Cancelado", "Cancelado :)", "error");
      }
    });
  }
}

Answer 1

您的问题是 swal 回调函数中 this 的值。

你可以尝试这样的事情:

borrarUsuario: function (id) {
  var self = this; // <------

  swal({
    title: "Desea borrarlo?",
    text: "Una vez borrado no se podra recuperar",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: 'si',
    closeOnConfirm: false
  }, function (isConfirm) {
    if (isConfirm) {
      Vue.http.post('/reports/vueGetRequest', id);
      self.fetchReports(); // <------
      swal("Eliminado!", "Ha sido eliminado correctamente!!.", "success");
    } else {
      swal("Cancelado", "Cancelado :)", "error");
    }
  });
}

或者:

borrarUsuario: function (id) {
  swal({
    title: "Desea borrarlo?",
    text: "Una vez borrado no se podra recuperar",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: 'si',
    closeOnConfirm: false
  }, function (isConfirm) {
    if (isConfirm) {
      Vue.http.post('/reports/vueGetRequest', id);
      this.fetchReports();
      swal("Eliminado!", "Ha sido eliminado correctamente!!.", "success");
    } else {
      swal("Cancelado", "Cancelado :)", "error");
    }
  }.bind(this)); // <------
}