title: "TypeError: Cannot read property '$emit' of undefined" - VueJS
body: <p>I am trying to implement a simple authentication in vuejs. I have a list of objects in which I have authentic username and password. I am iterating over this list and checking with the entered username and password. If there is a match then I am emitting an event and updating my variable authenticated. But the problem is inside the login in the forEarch loop i am not able to access the emit. </p>
  
  <p>This is my Login.vue file</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;template&gt;
      &lt;div id="login"&gt;
          &lt;h1&gt;Login&lt;/h1&gt;
          &lt;b-form-input v-model="input.username" placeholder="Username"&gt;&lt;/b-form-input&gt;
          &lt;br/&gt;
          &lt;b-form-input v-model="input.password" placeholder="Password" type="password"&gt;&lt;/b-form-input&gt;
          &lt;br/&gt;
          &lt;b-button variant="primary" v-on:click="login()"&gt;Submit&lt;/b-button&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      
      export default {
          name: 'Login',
          data() {
              return {
                  input: {
                      username: "",
                      password: ""
                  }
              }
          },
          methods: {
              login() {
                  var enteredUsername = this.input.username;
                  var enteredPassword = this.input.password;
                  if(enteredUsername !== "" &amp;&amp; enteredPassword !== "") {
                      this.$parent.mockAccount.forEach(function (element) {
                          if (enteredUsername === element.username &amp;&amp; enteredPassword === element.password) {
                              this.$emit("authenticated", true)
                              this.$router.replace({name: "secure"})
                          }
                      })
                  }
              }
          }
      }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
      #login {
          width: 500px;
          border: 1px solid #CCCCCC;
          background-color: #FFFFFF;
          margin: auto;
          margin-top: 200px;
          padding: 20px;
      }
  &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is my App.vue file</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;div id="nav"&gt;
        &lt;router-link v-if="authenticated" to="/login" v-on:click.native="logout()" replace&gt;Logout&lt;/router-link&gt;
      &lt;/div&gt;
      &lt;router-view/&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
      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;
              }
          }
      }
  &lt;/script&gt;
  
  &lt;style&gt;
    body {
      background-color: #F0F0F0;
    }
    h1 {
      padding: 0;
      margin-top: 0;
    }
    #app {
      width: 1024px;
      margin: auto;
    }
  &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is the error i am getting 
  <a href="https://i.stack.imgur.com/wkLBt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wkLBt.png" alt="enter image description here"></a> </p>