Vuetify / Vue.js で動的なBreadcrumbsは作れないのか？

Vuetifyを使用して画面を構築しています。

以下、公式リンクです。
https://vuetifyjs.com/en/components/breadcrumbs/#breadcrumbs

Component
1<template>
2  <div>
3    <v-breadcrumbs :items="items"></v-breadcrumbs>
4
5    <v-breadcrumbs :items="items" large></v-breadcrumbs>
6  </div>
7</template>

<script>
  export default {
    data: () => ({
      items: [
        {
          text: 'Dashboard',
          disabled: false,
          href: 'breadcrumbs_dashboard',
        },
        {
          text: 'Link 1',
          disabled: false,
          href: 'breadcrumbs_link_1',
        },
        {
          text: 'Link 2',
          disabled: true,
          href: 'breadcrumbs_link_2',
        },
      ],
    }),
  }
</script>

Link 2の部分を動的に動かせないかと考えています（本当は１つのコンポーネントで動的なbreadcrumbsが作れれば一番いいですが・・・）
Laravelを使用しているので、Laravel-Breadcrumbを使えばいいじゃないかという声もありそうですが、サポートが終了しているそうなので、vue.js/vuetifyで組めないかと思っています。

v-breadcrumbs-itemの使い方に関しても今一つ理解が出来ておりません。

有識者の方、いらっしゃいましたらご回答よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

動的ということなので様々な場面が考えられますが、このサンプルではテキストの入力値をバインドしそれをウォッチしLink2というリンクの名前を動的に入れ替えてます。v-breadcrumbsではhref,disabled,textなどを例のようにバインドしてやれば簡単にできます。

vue
1<div id="app">
2  <v-app id="inspire">
3    <div>
4      <v-breadcrumbs :items="items">
5         <template v-slot:item="{ item }">
6          <v-breadcrumbs-item
7            :href="item.href"
8            :disabled="item.disabled"
9          >
10            {{ item.text }}
11          </v-breadcrumbs-item>
12        </template>
13      </v-breadcrumbs>
14      <v-text-field
15          v-model="title"
16          label="Label"
17        ></v-text-field>
18    </div>
19  </v-app>
20</div>

vue
1<script>
2  export default {
3    data: () => ({
4    items: [
5      {
6        text: 'Dashboard',
7        disabled: false,
8        href: 'breadcrumbs_dashboard',
9      },
10      {
11        text: 'Link 1',
12        disabled: false,
13        href: 'breadcrumbs_link_2',
14      },
15      {
16        text: 'Link 2',
17        disabled: true,
18        href: 'breadcrumbs_link_2',
19      },
20    ],
21    title:"hoge",
22  }),
23  watch :{
24    title(){
25      this.items[1].text = this.title
26    }
27  }
28  }
29</script>