VueでWEBアプリ(10)

今回も前回までと同様　こちらのブログ記事　を参考にVuetifyコンポーネントを試したことについてです。

前回から追加で実装してみたのは以下の通りです。

タイムライン・ホバー・区切り線・テーブルの項目にリンク設定

この中のテーブルの項目にリンク設定でサンプルコードのままだとうまくいかなかったところがあったのでそこの解決法と、前回よくわからなかったパンくずリストの使い方について書いていきます。

---

・パンくずリスト

スクリプトのhrefに飛ばしたいところのURLを貼ればいいだけでした。

（hrefとあるのにvuetify_v-breadcrumbs.htmlでホームまで飛んでいたので混乱していました。）

ハッシュがある地点へ飛ぶこともできます。

export default {
  data () {
    return {
      items3: [
         {
          text: "root",
          disabled: false,
          href: 'http://localhost:8080/#/about',
        },
        {
          text: "subdir1",
          disabled: false,
          href: 'http://localhost:8080/#/work#work-1',
        },
        {
          text: "subdir2",
          disabled: true,
          href: 'vuetify_v-breadcrumbs2.html',
        },
      ],
        }
  },

subdir1をクリックでWORKページのWork-1の位置まで飛んでいる

・テーブル項目にリンク埋め込み

参考記事　のままのコードだと以下のエラーが出ました。

'v-slot' directive doesn't support any modifier

調べたところ、こちらに解決法が載っていました。

'v-slot' directive doesn't support any modifierエラーの対処方法。

v-slotとしての記述の仕方が間違っていたようです。以下のように書きなおしたらエラーもなくちゃんと表示されました。

          <template v-slot:[`item.website`]="{ item }">
            <a target="_blank" :href="item.website">
              {{ item.website }}
            </a>
          </template>

---

この『VueでWEBアプリ』シリーズのコードをgithubで公開しています。参考までに。

https://github.com/izumi-shibano/test-vue