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

你的问题是this SwaI位回调函数内的值。

你可以尝试这样的事：

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();