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, }, ], }), computed: { ...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>
Advertisement
Answer
data()
is declared here as an arrow function, so this
refers to the outer scope, not the Vue component 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 computed prop:
export default { data: () => ({ homeMenu: '', }), computed: { breadcrumbs() { return [ { text: 'Accueil', disabled: false, href: '/', }, { text: this.homeMenu, disabled: false, href: '/' + this.homeMenu, }, ] } } }