Vue+Vuetify v-data-tableのアイテムにaリンクを入れる方法まとめ

Vue.jsでマテリアルデザインをかんたんに実装できるUIフレームワークとして Vuetifyがあります。

Vuetifyを使えば、グリッドなどのレイアウト機能、各種UIコンポーネントをゼロからコーディングすることなく組み込めます。

特に v-data-table コンポーネントは高機能なデータテーブルを少ない行数で実装できる便利なもの。

今回の記事では v-data-tableの各行（アイテム）にリンクを挿入する方法を解説します。

実行環境

vue@2.6.12
vuetify@2.4.11

実装方法

v-data-tableの各アイテム要素をリンクにするには、スロット（slot）を使いましょう。

下記のようなtemplateタグをv-data-table タグの子レベルに配置します。

<template v-slot:[`item.name`]="{ item }">
  <a :href="item.url"> {{ item.name }}</a>
</template>

スロットでは各itemの値を受け取れるので、itemにURLを持たせておけば aタグで指定できますね。

サンプル

全体のコードはこんな感じです。

<template>
  <v-data-table
      :headers="spotsHeaders"
      :items="spotsList"
      item-key="id"
      sort-by="id"
      class="elevation-1"
  >
    <template v-slot:item.name="{ item }">
      <a :href="item.url"> {{ item.name }}</a>
    </template>
  </v-data-table>
</template>

<script>
export default {
  name: "VuetifyDataTable",
  data: () => ({
    spotsList: [
      {
        id: 1,
        name: "Tokyo Disneyland",
        prefecture: "Chiba",
        category: "Entertainment",
        url: "https://www.tokyodisneyresort.jp/tdl/",
      },
      {
        id: 2,
        name: "Fushimi Inari",
        prefecture: "Kyoto",
        category: "Shrine",
        url: "http://inari.jp/",
      },
    ],
  }),
  computed: {
    spotsHeaders() {
      return [
        { text: "ID", value: "id" },
        { text: "スポット", value: "name" },
        { text: "都道府県", value: "prefecture" },
        { text: "カテゴリ", value: "category" },
      ];
    },
  },
};
</script>

v-data-tableの各パラメータでは、
:items には実際のデータセットを指定し、
:headers はヘッダーのキーと表示テキストを入れた連想配列を指定します。

v-slot:item は各行に組み込まれるスロットです。
各行のデータはitemとして受け取るので、ここではitem.urlやitem.nameで必要な値を取り出しています（これらはspotsListで定義したものです）

ちなみにv-slot:item.xxxxの部分は #item.xxxxと書き換えることができます。
”#”はv-slot:の省略記法です。

API Doc

lintでエラーになるときの対処

使用しているlinterにより、以下のようなエラーになるかもしれません。

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

そんなときは、

<template v-slot:item.name="{ item }">

これを、

<template v-slot:[`item.name`]="{ item }">

こう変えればエラーは消えるはずです。

まとめ

VuetifyはマテリアルデザインUIをVueで実装する強力なフレームワークです。

Vueを普段から使っている人なら直感的に扱えるのも魅力です。

とはいえ、業務で使用してると、謎の制約があったり実装面の限界なども見えてきました。

今後もVuetifyについての技術まとめを発信していきます。