[Vuejs]-How make dynamic breadcrumbs in vue.js?

5👍

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,
        },
      ]
    }
  }
}

demo

👤tony19

0👍

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.com/@samchowdhury/create-a-breadcrumb-with-vue-js-and-element-plus-ui-f3e2fde50a3e

Leave a comment