[Vuejs]-Uncaught (in promise) TypeError: _this is not a function

3👍

Switch your handler to an arrow function to avoid changing the scope:

this.razorPayOptions = {
    'key': process.env.MIX_RAZORPAY_KEY,
    'name': process.env.MIX_APP_NAME,
    'description': 'Details ...',
    'handler': (request) => {
        axios.post('/api/transaction/complete', request)
            .then(response => {
                console.log(response);
                this.toast(response.data, response.status); // this is where the error occurs
            });
    }
}

Check out this answer for more context

👤cuzox

2👍

You can either switch to an arrow function, or capture this before you define your callback:

this.razorPayOptions = {
    'key': process.env.MIX_RAZORPAY_KEY,
    'name': process.env.MIX_APP_NAME,
    'description': 'Details ...',
    'handler': function (request) {
        const that = this;
        axios.post('/api/transaction/complete', request)
            .then(response => {
                console.log(response);
                that.toast(response.data, response.status); // this is where the error occurs
            });
    }
}

0👍

The problem is that you are misreading the scope. To solve your problem, change the function for an arrow function.

this.razorPayOptions = {
'key': process.env.MIX_RAZORPAY_KEY,
'name': process.env.MIX_APP_NAME,
'description': 'Details ...',
'handler': (request) => {
    axios.post('/api/transaction/complete', request)
        .then(response => {
            console.log(response);
            this.toast(response.data, response.status); // this is where the error occurs
        });
   }
}

could you read this post https://www.codementor.io/@dariogarciamoya/understanding-this-in-javascript-with-arrow-functions-gcpjwfyuc.

Leave a comment