Question

我正在尝试将面包屑合并到我的vuetify应用程序中，但这是我的代码：

<v-breadcrumbs divider=">">
    <v-breadcrumbs-item
        v-for="breadcrumb in breadcrumbs"
        exact
        :to="breadcrumb.to">
        {{ breadcrumb.text }}
    </v-breadcrumbs-item>
</v-breadcrumbs>

然后我在控制台中收到此警告。我不太确定这是什么意思。

default slot' is deprecated, use ':items and scoped slot "item"' instead

如果我尝试使用vuetify文档中的默认模板：<v-breadcrumbs :items="items">，则只允许使用href而不是我需要的:to。

有人可以帮我吗？

Answer 1

似乎Veutify现在提供了一个item范围内的插槽，可用于自定义面包屑。看他们的例子here，我认为您需要做的是..

<v-breadcrumbs :items="breadcrumbs" divider=">">
    <v-breadcrumbs-item
        slot="item"
        slot-scope="{ item }"
        exact
        :to="item.to">
        {{ item.text }}
    </v-breadcrumbs-item>
</v-breadcrumbs>

Answer 2

替代方法是使用带有点击事件的方法

<template>
  <v-breadcrumbs divider=">">
    <v-breadcrumbs-item
        v-for="breadcrumb in breadcrumbs"
        exact
        @click="goTo(breadcrumb.to)">
        {{ breadcrumb.text }}
    </v-breadcrumbs-item>
  </v-breadcrumbs>
</template>

<script>
  export default {
    methods: {
      goTo (payload) {
        this.$router.push(payload)
      }
    }
  }
</script>

Answer 3

您可以使用以下代码，与上述解决方案相比，它要简单得多：

<template>
  <v-breadcrumbs :items="breadcrumbs">
    <template v-slot:divider>
      <v-icon>mdi-menu-right</v-icon>
    </template>
  </v-breadcrumbs>
</template>

<script>
export default {
  data() {
    return {
      breadcrumbs: [
        {
          nuxt: true,
          activeClass: "",
          text: "Page A",
          to: { name: "page-a" },
        },
        {
          disabled: true,
          text: "Page B",
        },
      ],
    };
  },
};
</script>

Answer 4

来自官方 website 的示例，

<template>
  <v-breadcrumbs :items="items">
    <template v-slot:item="{ item }">
      <v-breadcrumbs-item
        :href="item.href"
        :disabled="item.disabled"
      >
        {{ item.text.toUpperCase() }}
      </v-breadcrumbs-item>
    </template>
  </v-breadcrumbs>
</template>

Vuetify面包屑作用域槽

4 个答案: