top of page
  • 執筆者の写真T sakurako

VueでWEBアプリ(11)

前回テーブル項目にリンク埋め込みをしたときv-slotを足すことでエラーを解決しましたが、v-slotが何なのかもtemplateタグで何をしているのかもよくわかっていない状態だったので、調べなおして自分用にまとめてみました。



 

・v-slot

v-date-tableにはテーブルカスタマイズのためにいくつかスロットというものが用意されている(item/body/headerなど)。item.<name>のようにスロットを指定すると特定の列だけカスタマイズできる。



・item

itemはテーブルの中身のこと。

item.<name>で<name>列の中身を指定してカスタマイズできる。



・target="_blank"

別タブでリンクを開く。



・:href="item.website"

リンク設定、リンク内容はitem.websiteの値



・'v-slot' directive doesn't support any modifierエラー

<template #item.website="{ item }">

 ↓のように修正

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

こちらの記事によると、ESLintが入っていると、このエラーが出るそう。



         <v-container style="width: 500px;">
          <v-data-table
          :headers="headers2"
          :items="items2"
        >
          <!-- website列だけをカスタマイズ。 -->
          <template v-slot:[`item.website`]="{ item }">
            <!-- リンクを別タブで開く・item.websiteの値でリンク設定 -->
            <a target="_blank" :href="item.website">
              {{ item.website }}
            </a>
          </template>
        </v-data-table>
        </v-container>  




 

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


記事: Blog2_Post
bottom of page