Vue.js: TypeError: Cannot read property '$router' of undefined?

Question

Laravel 5.7 and Vue.js2. I am working with JWT Authentication and Vuex to store my LoggedIn User information. When I want to redirect to homepage after login $router is giving this unexpected error.

Login Function:

login()
{
        Axios.post('/api/auth/login',{
          email: this.form.email,
          password: this.form.password
        })
        .then(function(response){

          let token = response.data.access_token;
          let username = response.data.user.name;
          let role = response.data.user.role;

          if(Token.isValid(token))
          {
            localStorage.setItem('token', token);
            localStorage.setItem('username', username);
            localStorage.setItem('role', role);

            this.$router.push({path: '/'});
          }

        })
        .catch(function(error){
          console.log(error)
        })
}

App.js

import Vuex from 'vuex';
import { routes } from './router/routes.js'
Vue.use(VueRouter)
Vue.use(Vuex);

const router = new VueRouter({
    routes,
    mode: 'history'
  })

const app = new Vue({
    el: '#app',
    router,
    components: {
        AppMain
    }
});

N1Creator · Accepted Answer · 2019-07-13 14:46:59Z

You use this code: this.$router.push({path: '/'}); in Function context. U can read more about "this" in javascript there https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

To correct the error, write the following code:

login()
{
        let self = this;
        Axios.post('/api/auth/login',{
          email: this.form.email,
          password: this.form.password
        })
        .then(function(response){

          let token = response.data.access_token;
          let username = response.data.user.name;
          let role = response.data.user.role;

          if(Token.isValid(token))
          {
            localStorage.setItem('token', token);
            localStorage.setItem('username', username);
            localStorage.setItem('role', role);

            self.$router.push({path: '/'});
          }

        })
        .catch(function(error){
          console.log(error)
        })
}

I have put "this" higher in context. Or u can use arrow function:

login()
{
        Axios.post('/api/auth/login',{
          email: this.form.email,
          password: this.form.password
        })
        .then((response) => {

          let token = response.data.access_token;
          let username = response.data.user.name;
          let role = response.data.user.role;

          if(Token.isValid(token))
          {
            localStorage.setItem('token', token);
            localStorage.setItem('username', username);
            localStorage.setItem('role', role);

            this.$router.push({path: '/'});
          }

        })
        .catch(function(error){
          console.log(error)
        })
}

u can read about arrow functions there: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

It's worth noting that if you do not want to use arrow functions or for whatever other reason, you can always assign this to another variable in the right scope, like const self = this and then later just use self.$router

Collectives™ on Stack Overflow

Vue.js: TypeError: Cannot read property '$router' of undefined?

App.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

App.js

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related