VueJs 2 computed value cant read data - vuejs2

Question

I'm trying to make a component for a login view. My app is really simple right now as I'm trying to learn Vue/Vuex.
In the sign in component, I want to check if the email is valid, using a computed value.
var emailRE = /^(([^<>()[\]\\.,;:\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,}))$/;
export default {
name: "SignIn",
data: () => {
return {
email: "",
password: ""
};
},
computed: {
isValidEmail: () => {
return emailRE.test(this.email);
}
},
methods: {
signIn() {
if (this.isValidEmail) {
this.$store.dispatch("signIn", {
email: this.email,
password: this.password
});
}
}
}
};
However, the isValidEmail function throws an error in the console:
Uncaught TypeError: Cannot read property 'email' of undefined
Why can't my computed value read the this.email?
PS: I had to use data as a function according to the guidelines.

Answer 1

From the comments:
Actually, VSCode won't complain as there is no syntax error in your
code but its a wrong usage of the arrow function. In fact Vuejs docs
warns us against using arrow functions in the vue components
properties vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks .
For more on arrow function and 'this' usage check this article.
medium.freecodecamp.org/… . Its a 5 minute read article very plainly
written with nice example.
This now works:
var emailRE = /^(([^<>()[\]\\.,;:\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,}))$/;
export default {
name: "SignIn",
data () {
return {
email: "",
password: ""
};
},
computed: {
isValidEmail () {
return emailRE.test(this.email);
}
},
methods: {
signIn () {
if (this.isValidEmail) {
this.$store.dispatch("signIn", {
email: this.email,
password: this.password
});
}
}
}
};