dynamic vuetify breadcrumbs list items-CodePudding

I want to use breadcrumbs in my vuetify project but I'm stuck somewhere. The point I'm stuck with is that when I click on bredcrumbs, the ones that come after that are deleted from the breadcrumbs list. For this, I tried the code below, but I could only delete the next element from it. Also, I couldn't delete the dividers. How do you think I can overcome this situation? thanks.

template:

    <v-breadcrumbs :items="items" divider=">">
        <template v-slot:item="{ item }">
          <v-breadcrumbs-item :href="item.href" @click="showSelectedRow2(item)">
            {{ item.text }}
          </v-breadcrumbs-item>
        </template>
      </v-breadcrumbs>

Data:

items: [
  {
    text: '',
    disabled: false,
    id: '',
  },
],

Script:

 showSelectedRow2(item) {
  for (var i = 0; i < this.items.length; i  ) {
    if (this.items[i].id == item.id) {
      const index = this.items.indexOf(this.items[i]);
      this.items.splice(index, 1);
    }

    this.items.push({
      text: item.name,
      disabled: false,
      id: item.id,
    });
  }
},

eg Technology>Computer>laptop>Apple when I click on technology, only technology should remain in the list. I don't use route or link, I fill the list with data I get from an api.

CodePudding user response：

You can try to change your method like in the following snippet: (you can disable items or you can remove them)

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      items: [{text: 'Technology', disabled: false, id: 0,}, {text: 'Computer', disabled: false, id: 1,}, {text: 'Laptop', disabled: false, id: 2,}, {text: 'Apple', disabled: false, id: 3,},],
    }
  },
  methods: {
    itemIdx(itm) {
      return this.items.findIndex(i => i.id === itm.id)
    },
    showSelectedRow2(item) {
        //this.items = this.items.map(el => this.itemIdx(el) > this.itemIdx(item) ? {...el, disabled: true} : el)
      this.items = this.items.filter(el => this.itemIdx(el) <= this.itemIdx(item))
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-breadcrumbs :items="items" divider=">">
          <template v-slot:item="{ item }">
            <v-breadcrumbs-item :href="item.href" @click="showSelectedRow2(item)">
              {{ item.text }}
            </v-breadcrumbs-item>
          </template>
        </v-breadcrumbs>
      </v-container>
    </v-main>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>