La méthode Vuejs ajax appelle d'autres méthodes sur le composant

Question

Comment appeler une autre méthode en jquery ajax ?

methods : {
    calert(type,msg="",error=""){
        console.log("call me");
    },
    getData(){
        $.ajax({
            type: "GET",
            success: function(data){
                // error calert not found
                calert(true,"","asd");
            },
            error: function (error) {
                // also error calert not found
                this.calert(false,"",error);
            },
            complete: function(){
            },
            url: "/test",
        });
    },
}

J'ai essayé d'utiliser this.calert mais ça ne marche pas, toujours l'erreur

Answer 1

Au fait, j'ai trouvé la solution, ça a l'air un peu délicat à utiliser

methods : {
    calert(type,msg="",error=""){
        console.log("call me");
    },
    getData(){
        let vm = this;
        $.ajax({
            type: "GET",
            success: function(data){
                // error calert not found
                vm.calert(true,"","asd");
            },
            error: function (error) {
                // also error calert not found
                vm.calert(false,"",error);
            },
            complete: function(){
            },
            url: "/test",
        });
    },
}

Je stocke this dans une variable, puis j'utilise cette variable pour appeler d'autres méthodes.

Quelqu'un a-t-il une meilleure solution que celle-ci ?

Merci

Answer 2

Il vous suffit de mettre à jour votre code pour utiliser les fonctions fléchées comme suit :

methods : {
    calert(type,msg="",error=""){
        console.log("call me");
    },
    getData(){
        $.ajax({
            type: "GET",
            success: (data) => {
                this.calert(true,"","asd");
            },
            error: (error) => {
                this.calert(false,"",error);
            },
            complete: (){
            },
            url: "/test",
        });
    },
}

Vous pouvez également stocker une référence locale à la méthode, par exemple :

methods : {
    calert(type,msg="",error=""){
        console.log("call me");
    },
    getData(){
        const { calert } = this;

        $.ajax({
            type: "GET",
            success: function(data){
                // error calert not found
                calert(true,"","asd");
            },
            error: function (error) {
                // also error calert not found
                calert(false,"",error);
            },
            complete: function(){
            },
            url: "/test",
        });
    },
}