Me gustaría tener migas de pan dinámicas basadas en dónde hice clic en una categoría, pero aparece un error que dice que mi variable no está definida: TypeError: Cannot read properties of undefined (reading 'homeMenu') . Sin embargo, en mi función getHomeCategory , el archivo console.log de homeCategory muestra Perma'Thèque . no entiendo como se hace gracias
Aquí está el código:
<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>data() se declara aquí como una función de flecha, por lo this refiere al alcance externo, no a la instancia del componente Vue, pero incluso como una función normal aquí, this.homeMenu aún no existirá.
Parece que en realidad desea que las breadcrumbs de pan sean reactivas a homeMenu , por lo que debe mover las breadcrumbs de pan a un accesorio computado :
export default { data: () => ({ homeMenu: '', }), computed: { breadcrumbs() { return [ { text: 'Accueil', disabled: false, href: '/', }, { text: this.homeMenu, disabled: false, href: '/' + this.homeMenu, }, ] } } }