Vuejs Sweetalert Uncaught TypeError

Question

当调用函数Uncaught TypeError: this.fetchReports is not a function时出现this.fetchReports错误似乎我可以从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)); // <------
}

Answer 2

可以使用实例变量调用Vuejs实例中的任何函数。

var vm=new Vue({
   el:'#app',
   data:{},
   methods: {
      fetchReports:function(){
      //do your stuff
    }
   }
});

//Outside in javascript file you can call

  vm.fetchReports();