如何在 vue.js 中制作动态面包屑？

Question

我想要一个基于我点击类别的位置的动态面包屑，但我收到一条错误，指出我的变量未定义：TypeError: Cannot read properties of undefined (reading \'homeMenu\')。然而在我的getHomeCategory函数中，console.loghomeCategory显示Perma\'Th\xc3\xa8que。我不明白该怎么做，谢谢

\n

这是代码：

\n

<script>\n    export default {\n        props: {\n        },\n        data: () => ({\n            homeMenu: "",\n            breadcrumbs: [\n                {\n                    text: \'Accueil\',\n                    disabled: false,\n                    href: \'/\',\n                },\n                {\n                    text: this.homeMenu,\n                    disabled: false,\n                    href: "/" + this.homeMenu,\n                },\n            ],\n            \n        }),\n        computed: {\n            ...mapGetters({\n                console: () => console,\n                homeCategory: \'home/getCategory\',    \n            })\n        },\n        methods: {\n            getHomeCategory ()  {\n                if (this.homeCategory === "Perma\'Th\xc3\xa8que") {\n                    console.log(this.homeCategory)\n                    return this.homeMenu = "permatheque"\n                } else {\n                    return this.homeMenu = "null"\n                }\n            },\n\n            \n        },\n        mounted() {\n            if (this.plantActive) this.loading = false;\n            this.getHomeCategory()\n        }\n    }\n</script>\n

\n

Answer 1

data()在这里被声明为箭头函数，因此this指的是外部作用域，而不是 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,
        },
      ]
    }
  }
}

演示