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.
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/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/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/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>