Vuejs Sweetalert 未捕获的类型错误答案

【问题标题】：Vuejs Sweetalert Uncaught TypeErrorVuejs Sweetalert 未捕获的类型错误
【发布时间】：2016-01-03 07:07:24
【问题描述】：

我在调用函数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");
      }
    });
  }
}

【问题讨论】：

标签： javascript vue.js

【解决方案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)); // <------
}

【讨论】：

非常感谢您的帮助，它对我有用:)。

【解决方案2】：

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

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

//Outside in javascript file you can call

  vm.fetchReports();

【讨论】：