TypeError: Cannot read properties of undefined (reading '$router') vuejs

Question

So I'm trying to redirect user to diffrent route if api call returns status 422. but I'm getting an error

TypeError: Cannot read properties of undefined (reading '$router')

my routes.js:

{
        path: '/dashboard',
        component: Dashboard,
        name: 'Dashboard',
        beforeEnter: (to, form, next) =>{
            axios.get('/api/authenticated')
                .then(()=>{
                    next();
                }).catch(()=>{
                    return next({ name: 'Login'})
            })
        },
        children: [
            {
                path: 'documentCollections',
                component: DocumentCollection,
                name: 'DocumentCollections'
            },
            {
                path: 'document',
                component: Document,
                name: 'Document'
            },
            {
                path: 'createDocument',
                component: CreateDocument,
                name: 'CreateDocument'
            },
            {
                path: 'suppliers',
                component: Suppliers,
                name: 'Suppliers'
            },
            {
                path: 'settings',
                component: Settings,
                name: 'Settings'
            },
        ]
}

I also have login/register components and when I use

this.$router.push({ name: "DocumentCollections"});

It redirects user without any error. The problem is when I am in children component of dashboard component.

in documentCollections component i have a method:

    loadCollections(){
        axios.get('/api/documentCollections')
            .then((response) => {
                this.Collections = response.data.data
                this.disableButtons(response.data.data);
            })
            .catch(function (error){
                if(error.response.status === 422){
                    //here is where the error happens
                    this.$router.push({ name: "Settings"});
                }
            });
    },

That loads collections but if user has some data set null api return status 422. and I want him to be redirected to Settings component. (both documentCollection and Settings are child components of Dashboard)

why doesn't this.$router.push work here but works in login/register component?

Tamas Szoke · Accepted Answer · 2021-10-21 18:20:14Z

Calling this inside a callback function creates a new binding to the this object instead of the Vue object in a regular function expression.

You can use the arrow syntax to define the function, so this won't be overwritten.

.catch((error) => {
    if(error.response.status === 422){
        this.$router.push({name: "Settings"});
    }
})

More information

Another option

Define another instance of this before the axios call and use it after you received the response.

let self = this
...
self.$router.push({name: "Settings"})

With your code

loadCollections(){
    let self = this;
    axios.get('/api/documentCollections')
        .then((response) => {
            this.Collections = response.data.data
            this.disableButtons(response.data.data);
        })
        .catch(function (error){
            if(error.response.status === 422){
                self.$router.push({name: "Settings"});
            }
        });
},

Bernardo Dal Corno · Accepted Answer · 2022-12-19 13:30:00Z

8

If using Composition API:

// Import
import router from "@/router";

//and use
router.push({name: "Settings"});

edited Dec 19, 2022 at 13:30

Bernardo Dal Corno

2,1681 gold badge27 silver badges31 bronze badges

answered Dec 10, 2022 at 11:33

Jhon Ariel Luque Cusacani

811 silver badge2 bronze badges

2 Comments

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Priya Patel Over a year ago

This method worked for me

Collectives™ on Stack Overflow

TypeError: Cannot read properties of undefined (reading '$router') vuejs

2 Answers 2

Another option

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Another option

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related