Question

“TypeError：无法读取未定义的属性‘$emit’” - VueJS

2019-04-09

21493

javascript authentication vue.js

我正在尝试在VUEJS中实现一个简单的身份验证。我有一个对象列表，其中我具有真实的用户名和密码。我正在迭代此列表，并检查输入的用户名和密码。如果有匹配项，那么我将发出事件并更新我的变量认证。但是问题在搜索循环中的登录内，我无法访问EMIT。

这是我的登录文件

189156033

这是我的app.vue文件

574807547

这是我遇到的错误

Answer 1

ES5 函数有自己的 this ，因此请将

this.$parent.mockAccount.forEach(function (element) {
  if (enteredUsername === element.username && enteredPassword === element.password) {
    this.$emit("authenticated", true)
    this.$router.replace({name: "secure"})
  }
})

更改为 ES6 箭头函数（其具有与定义它们的上下文相同的 this ）

this.$parent.mockAccount.forEach((element) => {
  if (enteredUsername === element.username && enteredPassword === element.password) {
    this.$emit("authenticated", true)
    this.$router.replace({name: "secure"})
  }
})

或使用 Function.prototype.bind() (ES5) 进行显式绑定：

this.$parent.mockAccount.forEach(function (element) {
  if (enteredUsername === element.username && enteredPassword === element.password) {
    this.$emit("authenticated", true)
    this.$router.replace({name: "secure"})
  }
}.bind(this))

或使用闭包：

const self = this;
this.$parent.mockAccount.forEach(function (element) {
  if (enteredUsername === element.username && enteredPassword === element.password) {
    self.$emit("authenticated", true)
    self.$router.replace({name: "secure"})
  }
})