Vue - how can i call another method from a callback?

Question

I need to call the function get_data() once the function save_key() is done executing, the problem is that i get a Cannot read property 'get_data' of undefined error. I assume i'm getting it because the function is called from a callback. How can i solve this?

methods: {
    async get_data(){
        var response = await axios.get("http://127.0.0.1:8000/retrieve_user_data");
            this.keys = response['data']
    },

    save_key(){
        var key_data = {'action': 'save', 'key': this.form.key}

        return axios({
          method: 'post',
          url: 'http://127.0.0.1:8000/save_data/',
          data: key_data,
          withCredentials: true,
          headers: {}
        }).then(function (response) {
            this.get_data()
        })

    }
}

Indeed, that worked! Can you make an answer so that i can accept it? Thanks :) — JayK23, Jul 10 '21 at 17:41

score 1 · Accepted Answer · answered Jul 10 '21 at 18:05

The error is because the scope of 'this' is set to global(window) object in your callback. This can be solved by using arrow function or using a placeholder variable for this. You can try and update your save_key function like this

save_key(){
    const self = this;
    var key_data = {'action': 'save', 'key': this.form.key}

    return axios({
        method: 'post',
        url: 'http://127.0.0.1:8000/save_data/',
        data: key_data,
        withCredentials: true,
        headers: {}
        })
        .then(function (response) {
            self.get_data();
        })

    }

`const self = this;` is poor practice, one can use either an arrow function or bind(this) to the function — Lawrence Cherone, Jul 10 '21 at 18:50

Vue - how can i call another method from a callback?

1 Answers1