Vuejs method ajax call other method on component

Question

how to call another method inside 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",
        });
    },
}

i have try to using this.calert but it doesn't work, still error

CodeTheorist · Accepted Answer · 2022-03-07 14:01:15Z

You simply need to update your code to use arrow functions, as follows:

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",
        });
    },
}

Or alternatively, store a local reference to the method, like:

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",
        });
    },
}

Deddy Chandra · Accepted Answer · 2022-03-07 14:07:53Z

0

btw i found the solution, looks like little bit tricky using this

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",
        });
    },
}

i store the this to variable and then i use the variable to call another methods.

Anyone have any solutions better than this?

Thanks

answered Mar 7, 2022 at 14:07

Deddy Chandra

412 bronze badges

1 Comment

Igor Moraru Over a year ago

assigning this to variable has been made obsolete with the introduction of arrow functions, which have access to global context. just use them in ajax callbacks. for ex: success: (data) => this.calert(true, "", "asd")

Collectives™ on Stack Overflow

Vuejs method ajax call other method on component

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related