Vuetify breadcrumbs scoped slot

Question

I'm trying to incorporate breadcrumbs into my vuetify app however this is my code:

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

And then I get this warning in the console. Im not really sure what it means..

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

If i try the default template from vuetify docs: <v-breadcrumbs :items="items"> it only allows for a href not a :to which is what I need.

Can anyone help me out.

Answer 1

It seems that Veutify now provides an item scoped slot that can be used to customize breadcrumbs. Looking at their example here I think what you need to do is the following ..

<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

alternative is use a method with a click event

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