Tech Vue/Nuxt.js

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

2021年5月19日

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についての技術まとめを発信していきます。

  • この記事を書いた人

次世代ペンギン

長いのでペンギンとお呼びください。システム開発・プログラミングのお仕事をしています。甘味とコーヒーは生命線。日常での学びを記事にしています。

人気の記事

1

キャリアアップのため、または高収入を目指して、しっかりプログラミングを学びたいという人が増えてきましたね。 この記事では現役のエンジニアである私が、実際に仕事で稼げるようになるためのスクール選びで失敗 ...

2

先日の記事では、初心者からフリーランスプログラマーになる難しさと、それでもなんとか稼げるようになるにはどうしたらいいか解説しました。 今回の記事では、稼げるフリーランサーになるために必要な要素を、もう ...

3

気休めだけの甘い言葉は書きません。 最近は多くの企業やサイトで、使い捨てられるプログラマーが欲しいがために、甘い言葉で初心者プログラマを誘い出しています。 この記事では、まずは「現実」をちゃんと理解し ...

4

Vuetifyの v-progress-circular コンポーネントは、数値データや処理状況を環状(円状)のデザインで教えてくれるUIデザインです。 ローディングのスピナー(処理中のマーク)として ...

5

※画像はずとまよの新曲とは一切関係ありません   ずっと真夜中でいいのに。(以下、ずとまよ)の新曲『勘ぐれい』のMVが12月1日に公開されましたね。 MV前に公開されていた原曲を聴き、神曲な ...

6

Vuexのstore(ストア)を使うと、各コンポーネント間で個別にデータのやり取りすることなく、データを一元的に管理できます。Vueでは欠かせない機能といえるでしょう。 state(変数、コンポーネン ...

-Tech, Vue/Nuxt.js
-, ,

© 2021 ペンギンのーと