Currently working on a vuetify project and I'm facing an issue with implementing breadcrumbs. The problem arises when clicking on a breadcrumb, as it deletes the ones that come after it in the list. I've tried some code snippets but could only manage to delete the next element from the list without removing dividers. Any suggestions on how to tackle this situation would be greatly appreciated. Thank you.
Here is my 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 structure:
items: [
{
text: '',
disabled: false,
id: '',
},
],
Snippet of script used:
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,
});
}
},
For example, if I have Technology>Computer>Laptop>Apple in the breadcrumbs and I click on 'Technology', only 'Technology' should remain in the list. It's worth noting that I populate the list with data fetched from an API rather than using routes or links.