“ TypeError：無法讀取未定義的屬性'$ emit'”-VueJS

Question

我正在嘗試在vuejs中實現簡單的身份驗證。 我有一個包含真實用戶名和密碼的對象列表。 我正在遍歷此列表並檢查輸入的用戶名和密碼。 如果存在匹配項，那么我將發出事件並更新已驗證的變量。 但是問題出在forEarch循環中的登錄內部，我無法訪問發射。

這是我的Login.vue文件

 <template> <div id="login"> <h1>Login</h1> <b-form-input v-model="input.username" placeholder="Username"></b-form-input> <br/> <b-form-input v-model="input.password" placeholder="Password" type="password"></b-form-input> <br/> <b-button variant="primary" v-on:click="login()">Submit</b-button> </div> </template> <script> export default { name: 'Login', data() { return { input: { username: "", password: "" } } }, methods: { login() { var enteredUsername = this.input.username; var enteredPassword = this.input.password; if(enteredUsername !== "" && enteredPassword !== "") { this.$parent.mockAccount.forEach(function (element) { if (enteredUsername === element.username && enteredPassword === element.password) { this.$emit("authenticated", true) this.$router.replace({name: "secure"}) } }) } } } } </script> <style scoped> #login { width: 500px; border: 1px solid #CCCCCC; background-color: #FFFFFF; margin: auto; margin-top: 200px; padding: 20px; } </style> 

這是我的App.vue文件

 <template> <div id="app"> <div id="nav"> <router-link v-if="authenticated" to="/login" v-on:click.native="logout()" replace>Logout</router-link> </div> <router-view/> </div> </template> <script> export default { name: 'App', data() { return { authenticated: false, mockAccount: [ { username: "a", password: "a" }, { username: "rick", password: "rick2018" }, { username: "nick", password: "nick2018" }, { username: "paul", password: "paul2018" }] } }, mounted() { if(!this.authenticated) { this.$router.replace({ name: "Login" }); } }, methods: { setAuthenticated(status) { this.authenticated = status; }, logout() { this.authenticated = false; } } } </script> <style> body { background-color: #F0F0F0; } h1 { padding: 0; margin-top: 0; } #app { width: 1024px; margin: auto; } </style> 

這是我得到的錯誤

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