I would like to have a dynamic breadcrumbs based on where I clicked on a category but I get an error that says my variable is undefined: TypeError: Cannot read properties of undefined (reading 'homeMenu'). Yet in my getHomeCategory function, the console.log of homeCategory displays Perma'Thèque. I don't understand how to do it, thanks

Here is the code :

<script>
    export default {
        props: {
        },
        data: () => ({
            homeMenu: "",
            breadcrumbs: [
                {
                    text: 'Accueil',
                    disabled: false,
                    href: '/',
                },
                {
                    text: this.homeMenu,
                    disabled: false,
                    href: "/" + this.homeMenu,
                },
            ],
            
        }),
        puted: {
            ...mapGetters({
                console: () => console,
                homeCategory: 'home/getCategory',    
            })
        },
        methods: {
            getHomeCategory ()  {
                if (this.homeCategory === "Perma'Thèque") {
                    console.log(this.homeCategory)
                    return this.homeMenu = "permatheque"
                } else {
                    return this.homeMenu = "null"
                }
            },

            
        },
        mounted() {
            if (this.plantActive) this.loading = false;
            this.getHomeCategory()
        }
    }
</script>

I would like to have a dynamic breadcrumbs based on where I clicked on a category but I get an error that says my variable is undefined: TypeError: Cannot read properties of undefined (reading 'homeMenu'). Yet in my getHomeCategory function, the console.log of homeCategory displays Perma'Thèque. I don't understand how to do it, thanks

Here is the code :

<script>
    export default {
        props: {
        },
        data: () => ({
            homeMenu: "",
            breadcrumbs: [
                {
                    text: 'Accueil',
                    disabled: false,
                    href: '/',
                },
                {
                    text: this.homeMenu,
                    disabled: false,
                    href: "/" + this.homeMenu,
                },
            ],
            
        }),
        puted: {
            ...mapGetters({
                console: () => console,
                homeCategory: 'home/getCategory',    
            })
        },
        methods: {
            getHomeCategory ()  {
                if (this.homeCategory === "Perma'Thèque") {
                    console.log(this.homeCategory)
                    return this.homeMenu = "permatheque"
                } else {
                    return this.homeMenu = "null"
                }
            },

            
        },
        mounted() {
            if (this.plantActive) this.loading = false;
            this.getHomeCategory()
        }
    }
</script>

• javascript
• vue.js
• vuetify.js

2 Answers 2

data() is declared here as an arrow function, so this refers to the outer scope, not the Vue ponent instance, but even as a regular function here, this.homeMenu won't yet exist.

It seems that you actually want breadcrumbs to be reactive to homeMenu, so you should move breadcrumbs to a puted prop:

export default {
  data: () => ({
    homeMenu: '',
  }),
  puted: {
    breadcrumbs() {
      return [
        {
          text: 'Accueil',
          disabled: false,
          href: '/',
        },
        {
          text: this.homeMenu,
          disabled: false,
          href: '/' + this.homeMenu,
        },
      ]
    }
  }
}

demo

I used Element Plus UI and my mind was blown. Check out my blog and the codes. Element Plus is a free library that is great for Vue JS. They have very nice UI for breadcrumb and can be implemented with v-for loop. https://medium./@samchowdhury/create-a-breadcrumb-with-vue-js-and-element-plus-ui-f3e2fde50a3e