Uncaught (in promise) TypeError: Cannot read property 'email' of undefined

Question

Am using a vuejs app with laravel but i cant really get the component from the object what should i do

<script>
import axios from 'axios';
export default {
    data : function (){
        return {
            email: '',
            password: '',
            remember: 'true',
            errors: [],
        }
    },
    methods : {
        validateemail(mail){
            var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(mail);
        },
        attemptlogin(){
            this.errorsarray = [];
            axios.post('/login', {
                email: this.email,
                password: this.password,
                remember : this.remember
            }).then(function (response) {
                    location.reload();
                }).catch(function (error) {
                var code = error.response.status;
                console.log(this.email);
                    if(code == 422){


                        this.errors.push("Incorrect information");

                    }else{
                        console.log('no');
                        this.errors.push('Internal server error please try again later')
                    }
                }).then(function () {
                console.log('here');
            });
        },
    },
    computed : {
        isValidInput() {

            return this.validateemail(this.email) && this.password;
        }
    }
}

it also display this kind of error

Uncaught (in promise) TypeError: Cannot read property 'email' of undefined

I dont know why anyhelp ? thanks in advance

score 1 · Answer 1 · answered Jul 03 '18 at 23:38

Use () => {} function syntax instead of function() {}. The former will bind this correctly.

.catch(error => {
    console.log(this.email);
})

If you want to use function() {} then you must explicitly bind this:

.catch(function (error) {
    console.log(this.email);
}.bind(this))

See this answer for more information about bind.

Uncaught (in promise) TypeError: Cannot read property 'email' of undefined

1 Answers1