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函数在控制台中引发错误：

未捕获的TypeError：无法读取未定义的属性“电子邮件”

为什么我的计算值无法读取this.email？

PS：我必须根据指南将数据用作功能。

Answer 1

从评论中：

实际上，VSCode不会抱怨，因为您的语法中没有语法错误代码，但箭头功能的用法错误。实际上Vuejs文档警告我们不要在vue组件中使用箭头功能属性vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks。有关箭头功能和“ this”用法的更多信息，请查看本文。 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
        });
      }
    }
  }
};

VueJs 2计算值无法读取数据

1 个答案: