Vuetify 面包屑范围插槽答案

【问题标题】：Vuetify breadcrumbs scoped slotVuetify 面包屑范围插槽
【发布时间】：2019-07-04 15:04:02
【问题描述】：

我正在尝试将面包屑合并到我的 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，这正是我所需要的。

谁能帮帮我。

【问题讨论】：

标签： vue.js vuetify.js

【解决方案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>

【讨论】：

当我使用该代码时，我会收到一大堆错误Property or method "item" is not defined on the instance but referenced during render
抱歉打错字了。只需从slot-scope 中删除冒号即可。

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：