[英]How make dynamic breadcrumbs in vue.js?
我想根據單擊類別的位置獲得動態面包屑,但我收到一條錯誤消息,指出我的變量未定義: TypeError: Cannot read properties of undefined (reading 'homeMenu')
。 然而,在我的getHomeCategory
function 中, Perma'Thèque
homeCategory
不明白怎么弄,謝謝
這是代碼:
<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()
在這里聲明為箭頭 function,所以this
是指外部 scope,而不是 Vue 組件實例,但即使是常規的this.homeMenu
,這里也不會存在。
看來您實際上希望breadcrumbs
對homeMenu
具有反應性,因此您應該將breadcrumbs
移動到計算的 prop :
export default {
data: () => ({
homeMenu: '',
}),
computed: {
breadcrumbs() {
return [
{
text: 'Accueil',
disabled: false,
href: '/',
},
{
text: this.homeMenu,
disabled: false,
href: '/' + this.homeMenu,
},
]
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.