动态 vuetify 面包屑列表项

Question

我想在我的 vuetify 项目中使用面包屑，但我被困在某个地方。我坚持的要点是，当我单击 bredcrumbs 时，之后的那些将从 breadcrumbs 列表中删除。为此，我尝试了下面的代码，但我只能从中删除下一个元素。另外，我无法删除分隔符。你认为我怎样才能克服这种情况？谢谢。

模板：

    <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>

数据：

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

脚本：

 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,
    });
  }
},

例如技术>计算机>笔记本电脑>Apple 当我点击技术时，只有技术应该保留在列表中。我不使用路线或 link，我用从 api.

获得的数据填充列表

Answer 1

您可以尝试更改您的方法，如以下代码段所示：（您可以禁用项目或删除它们）

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>

动态 vuetify 面包屑列表项

dynamic vuetify breadcrumbs list items

javascript

breadcrumbs

vue.js

vuejs2

vuetify.js