VueJs 2 вычисленное значение не может прочитать данные

Question

Я пытаюсь создать компонент для вида входа в систему.Мое приложение сейчас очень простое, поскольку я пытаюсь изучить Vue / Vuex.

В компоненте входа я хочу проверить, является ли электронная почта действительной, используя вычисленное значение.

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
        });
      }
    }
  }
};

Однако функция isValidEmail выдает ошибку в консоли:

Uncaught TypeError: Невозможно прочитать свойство 'email' из неопределенного

Почему можно 't мое вычисленное значение читайте this.email?

PS: мне пришлось использовать данные как функцию в соответствии с рекомендациями.

Answer 1

Из комментариев:

На самом деле, VSCode не будет жаловаться, так как в вашем коде нет синтаксической ошибки, но он неправильно использует функцию стрелки.Фактически документы Vuejs предостерегают нас от использования функций стрелок в свойствах компонентов vue vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks.Для больше на функции стрелки и 'этом' использование проверяют эту статью.medium.freecodecamp.org/….Это 5-минутная прочитанная статья, очень просто написанная с хорошим примером.

Теперь это работает:

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
        });
      }
    }
  }
};