How to run method inside a response function using Vue.js

Question

I'm trying to run a method when I get success response from API, but the method dont run. I made a quick example here to show.

The test() function should be executed after i get the response, since its calling another API endpoint. Here is the vue.js code.

var app = new Vue({
    el: "#contents",
    data: { 
        id: null,
        details: [],
    },
 
    methods: {

        fetchProductDetails: function(){
            let vue = this;
            axios.post("/api/get-details", {
                id : id
            })
            .then(function (response) {
                vue.details = response.data;
                this.test();
            })
            .catch(function (error) {});
        },
    
        test: function () {
            console.log(app.details);
        }
    },
    mounted: function(){
        this.fetchProductDetails();
    },

});

Using function (response) in your .then most likely breaks the scope of this. Have you tried using the ES6 arrow syntax? — discolor
– discolor, Commented Jul 30, 2020 at 8:48

Excalibaard · Accepted Answer · 2020-07-30 08:55:19Z

1

You should run vue.test() instead of this.test(), just like you use vue.details = response.data instead of this.details = response.data.

When using an unnamed function in .then(), this no longer refers to your vue application, but to the unnamed function. You could use ES6 arrow function syntax in order to avoid having to set this to a specific variable, as arrow functions use their parent's scope for this instead of setting this to refer to themselves:

axios.post("/api/get-details", { id: this.id })
            .then(response => {
                this.details = response.data;
                this.test();
            })
            .catch(error => { console.log(error)});

Arrow functions (and ES6 in general) are not supported by IE11 however. so you'd need to use Babel to compile it back to something ES5 JavaScript if you need to support older browsers.

edited Jul 30, 2020 at 8:55

answered Jul 30, 2020 at 8:49

Excalibaard

2,10311 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sdfgg45 Over a year ago

Thanks, i supose i should use this format on api calls in the future then!

Excalibaard Over a year ago

If your target browsers support it (or it's handled by a tool chain that compiles it to older syntax), definitely! I personally like to use async/await instead of then/catch, and object destructuring to immediately reach into objects for the key I need as well:

async fetchProductDetails() {    try {      const { data } = await axios.post(/api/get-details, { id: this.id }); this.details = data;     this.test();   } catch (e) {     console.log(e);   } }

Collectives™ on Stack Overflow

How to run method inside a response function using Vue.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related