Quiero usar migas de pan en mi proyecto vuetify pero estoy atascado en alguna parte. El punto con el que estoy atascado es que cuando hago clic en las migas de pan, las que vienen después se eliminan de la lista de migas de pan. Para esto, probé el siguiente código, pero solo pude eliminar el siguiente elemento. Además, no pude eliminar los divisores. ¿Cómo crees que puedo superar esta situación? Gracias.
modelo:
<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>Datos:
items: [ { text: '', disabled: false, id: '', }, ],Guion:
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, }); } },Por ejemplo, Tecnología>Computadora>laptop>Apple cuando hago clic en tecnología, solo la tecnología debe permanecer en la lista. No uso ruta o enlace, lleno la lista con datos que obtengo de una API.
Puede intentar cambiar su método como en el siguiente fragmento: (puede deshabilitar elementos o puede eliminarlos)
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>