Vuetify.js 2.2 UIコンポーネントを調べたときの補足

概要

Vuetify.js 2.2のUIコンポーネントの使い方を調べたときに得られたtips(Vue.jsのtipsも含む)を簡単にまとめました。
UIコンポーネントの使い方については別記事に作成していて末尾の補足欄に一覧を掲載しています。

環境

• Windows 10 Professional 1909
• Node.js 12.14.1
• Vue.js 2.6.11
• Vuetify.js 2.2.17

tips

v-model ディレクティブ

フォーム入力バインディングでのinputやtextareaのv-modelは

<input v-model="text">

この記述と同じ意味になります。

<input
  v-bind:value="text"
  v-on:input="text = $event.target.value"
>

正確にはinput要素のタイプに応じて異なるプロパティとイベントが使用されます。

v-modelは、内部的にはinput要素に応じて異なるプロパティを使用し、異なるイベントを送出します:
* テキストと複数行テキストは、value プロパティと input イベントを使用します
* チェックボックスとラジオボタンは、checked プロパティと change イベントを使用します
* 選択フィールドは、value プロパティと change イベントを使用します

Vuetify.jsのUIコンポーネントにvalueプロパティとinputイベントがある場合、v-modelが使用できます。

	value prop	input-value prop	input event	input value
v-alert	Controls whether the component is visible or hidden.		The updated bound model	boolean
v-carousel	The designated model value for the component.		The updated bound model	number
v-chip	The value used when a child of a v-chip-group.	Controls the active state of the item. This is typically used to highlight the component.	The updated bound model	boolean
v-dialog	Controls whether the component is visible or hidden.		The updated bound model	boolean
v-navigation-drawer	Controls whether the component is visible or hidden.		The updated bound model	boolean
v-pagination	Current selected page		The updated bound model	number
v-rating	The rating value		Emits the rating number when this value changes	number
v-snackbar	Controls whether the component is visible or hidden.		The updated bound model	boolean
v-treeview	Allows one to control which nodes are selected. The array consists of the item-key of each selected item. Is used with @input event to allow for v-model binding.		Emits the array of selected items when this value changes	array

v-on ディレクティブ

• 参考: Meaning of v-slot:activator=“{ on }”

Vuetify.jsのUIコンポーネントの中にはアクティベータスロットを定義するものがあります。
例えばv-dialogコンポーネントは、下記のようにダイアログ表示のトリガーになるボタンをアクティベータスロットで定義することができます。

<v-dialog v-model="dialog">
  <template v-slot:activator="{ on }">
    <v-btn v-on="on">Open Dialog</v-btn>
  </template>
  <!-- ダイアログの定義 省略 -->
</v-dialog>

このコードのv-slot:activator="{ on }"とv-on="on"という部分は、Vue.js 2.4.0からサポートされているオブジェクト構文と呼ばれる記法です。

<!-- オブジェクト構文 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

v-for ディレクティブと変数展開

同一のv-for内で複数の要素にkeyをバインディングする場合、以下のコードでそれぞれの要素のkeyにindexをバインドすると

<template v-for="(item, index) in items">
  <v-divider inset :key="index"></v-divider>
  <v-list-item :key="index" link>
    <!-- 省略 -->
  </v-list-item>
</template>

実行時にブラウザのコンソールにこのようなWARNが出力されます。（表示だけであれば特に問題ないように見えるのですが、バインドしたデータが更新される場合は問題が起きるかもしれません）

[Vue warn]: Duplicate keys detected: '0'. This may cause an update error.

このため、以下のようにそれぞれのkeyに異なる値をバインドするようにしました。

<template v-for="(item, index) in items">
  <v-divider inset :key="`div-${index}`"></v-divider>
  <v-list-item :key="`list-${index}`" link>
    <!-- 省略 -->
  </v-list-item>
</template>

この書き方はJavaScript(ES2015)から使える、文字列中に変数展開ができるテンプレート構文といいます。

:key="`div-${index}`"

v-show ディレクティブとVuetifyのcss visibility

v-showやv-ifで条件付きレンダリングを行えます。それぞれの特徴は下記に引用した通りです。

v-if
遅延描画(lazy)です。 初期表示においてfalseの場合、何もしません。条件付きブロックは、条件が最初にtrueになるまで描画されません。

v-show
要素は初期条件に関わらず常に描画され、シンプルなCSSベースの切り替えとして保存されます。

Vuetify.jsには$vuetify.breakpointというサービスオブジェクトがあり、このオブジェクトのプロパティを併用することで特定のブレイクポイントのときに要素を表示する／表示しないといった実装ができます。

以下の例ではブレイクポイントがLG以上でv-cardコンポーネントが表示され、MD以下で非表示になりますがv-showの場合はスタイルに"display: none;"が適用され、v-ifの場合は要素自体が描画されません。

<v-card v-show="$vuetify.breakpoint.lgAndUp">
  <!-- 省略 -->
</v-card>

<v-card v-if="$vuetify.breakpoint.lgAndUp">
  <!-- 省略 -->
</v-card>

さらに、Vuetify.jsではCSSで要素の表示／非表示をコントロールできます。どちらもブレイクポイントがLG以上でv-cardコンポーネントが表示されます。

<v-card class="d-none d-lg-block">
  <!-- 省略 -->
</v-card>

<v-card class="hidden-md-and-down">
  <!-- 省略 -->
</v-card>

visibility (可視性)

• 参考: Display helpers

visibiity	breakpoint code
.d-none	xs	xs以上で非表示。(つまり全てのブレイクポイント)
.d-{breakpoint}-none	sm, md, lg, xl	指定したコード以上で非表示。
.d-block	xs	xs以上で表示。(つまり全てのブレイクポイント)
.d-{breakpoint}-block	sm, md, lg, xl	指定したコード以上で表示。

noneやblockの部分には、以下の値を使用できます。基本的にはCSSのdisplayの値です。

value	display
none	display: none !important;
inline	display: inline !important;
inline-block	display: inline-block !important;
block	display: block !important;
table	display: table !important;
table-cell	display: table-cell !important;
table-row	display: table-row !important;
flex	display: flex !important;
inline-flex	display: inline-flex !important;

hidden

{breakpoint} : xs、sm、md、lg、xl
{condition} : only、and-down、and-up

hidden-{breakpoint}-{condition}

Vuetify object

Breakpoint service object

$vuetify.breakpoint

property	type	description
name	string	現在のbreakpointの名前
height	number	高さ(px)
width	number	幅(px)
xs	boolean	現在のbreakpointがxsの時はtrue
sm	boolean	現在のbreakpointがsmの時はtrue
md	boolean	現在のbreakpointがmdの時はtrue
lg	boolean	現在のbreakpointがlgの時はtrue
xl	boolean	現在のbreakpointがxlの時はtrue
xsOnly	boolean	?
smOnly	boolean	?
mdOnly	boolean	?
lgOnly	boolean	?
xlOnly	boolean	?
smAndDown	boolean	現在のbreakpointがsm以下の時はtrue
smAndUp	boolean	現在のbreakpointがsm以上の時はtrue
mdAndDown	boolean	現在のbreakpointがmd以下の時はtrue
mdAndUp	boolean	現在のbreakpointがmd以上の時はtrue
lgAndDown	boolean	現在のbreakpointがlg以下の時はtrue
lgAndUp	boolean	現在のbreakpointがlg以上の時はtrue
resizeTimeout	number	?
scrollBarWidth	number	スクロールバーの幅(px)
thresholds.xs	number	xsと判断する横幅(px)の閾値
thresholds.sm	number	smと判断する横幅(px)の閾値
thresholds.md	number	mdと判断する横幅(px)の閾値
thresholds.lg	number	lgと判断する横幅(px)の閾値

Application service object

$vuetify.application

property	type	description
bar	number
top	number
left	number
insetFooter	number
right	number
bottom	number
footer	number

Styles

Elevation helpers

{n}には0から24までの数値を指定できます。

format

elevation-{n}

UIコンポーネントの中にはelevationプロパティを持つものがあり、以下のようにelevationを指定することができます。

<v-card elevation="10">
  <!-- 省略 -->
</v-card>

このようなUIコンポーネント以外でも、CSSでelevationを指定することができます。

<div class="d-block elevation-10">
  block text
</div>

Spacing helpers

下記の命名規約のCSSクラスで要素にマージンやパディングを設定できます。

format

{property}{direction}-{size}

<div class="pa-3">
  <!-- 上下左右に12pxのパディングを設定する -->
</div>

property

property
m	margin
p	padding

direction

direction
t	top
b	bottom
l	left
r	right
s	?
e	?
x	left and right
y	top and bottom
a	all directions (top and bottom and left and right)

size

4px単位で増分

size	px
0	0	margin, padding
1	4px	margin, padding
2	8px	margin, padding
3	12px	margin, padding
4	16px	margin, padding
5	20px	margin, padding
6	24px	margin, padding
7	28px	margin, padding
8	32px	margin, padding
9	36px	margin, padding
10	40px	margin, padding
11	44px	margin, padding
12	48px	margin, padding
n1	4px	margin
n2	8px	margin
n3	12px	margin
n4	16px	margin
n5	20px	margin
n6	24px	margin
n7	28px	margin
n8	32px	margin
n9	36px	margin
n10	40px	margin
n11	44px	margin
n12	48px	margin
auto	auto

関数型コンポーネント

• 参考 : 関数型コンポーネント

Vue.jsの関数型コンポーネントとは

• 状態を持たない (リアクティブデータが無い)
• インスタンスを持たない (thisのコンテキストが無い)

という特徴を持つ軽量コンポーネントです。

Vuetify.jsのコンポーネントの中には関数型コンポーネントとして実装されているものがあります。
簡単な見分け方として、オフィシャルサイトのAPIドキュメントでPROPSやEVENTなどが無いコンポーネントは関数型コンポーネントとして考えて良いとおもいます。

例えばv-card-textコンポーネントは関数型コンポーネントですが、図のようにAPIドキュメントにはPROPSやEVENTがありません。

upgrade from 2.2.x to 2.3.x

2020年6月12日にVuetify.js 2.3.0がリリースされました。
Upgrade Guideに記載の通り（下記引用）、後方互換が考慮されているので基本的にソースコードの必須ではないということです。

Upgrade guide
Liberator contains a few small upgrades for deprecated functionality. Don't worry, these upgrades are BACKWARDS compatible. If you experience anything that suggests otherwise, please reach out to us in our Discord community.

また、実行時にコンソールに下図のようなメッセージが表示されるので修正箇所の把握は簡単です。

補足

リソース

Vuetify.jsのUIコンポーネントを調べるときに参考にしたサイトです。

オフィシャル情報

• Quick start - Vuetify.js
• vuetifyjs / vuetify - github.com

チートシート

• VUETIFY FUNDAMENTALS CHEAT SHEET (PDF)

マイグレーション

• Migrating from v1.5.x to v2.0.x

リリース

• Release Note
• Release v2.2.0 Tigris
• Release v2.1.0 Vanguard
• Release v2.0.0 Arcadia

アンオフィシャル

• Vuetify - Material Component Framework for Vue.js | reddit.com
• Vuetify.js Questions - Stack Overflow

マテリアルデザイン

• Homepage - Material Design
• Material Design Icons
• Bootstrap

UIコンポーネントの使い方の記事一覧

Vuetify.jsのUIコンポーネントを調べたときに作成した記事の一覧です。

• Vuetify.js 2.2のSheet, Alert, Avatar, Badge, Iconコンポーネントについて
• Vuetify.js 2.2のPagination, Stepperコンポーネントについて
• Vuetify.js 2.2のCardコンポーネントについて
• Vuetify.js 2.2のButtonコンポーネントについて
• Vuetify.js 2.2のChipコンポーネントについて
• Vuetify.js 2.2のDialogコンポーネントについて
• Vuetify.js 2.2のMenu, Tooltipコンポーネントについて
• Vuetify.js 2.2のListコンポーネントについて
• Vuetify.js 2.2のGridSystemについて
• Vuetify.js 2.2のFooterコンポーネントについて
• Vuetify.js 2.2のApp Barsコンポーネントについて
• Vuetify.js 2.2のNavigation drawersコンポーネントについて
• Vuetify.js 2.2のBottom navigationコンポーネントについて
• Vuetify.js 2.2のApplicationについて

Vuetify.js 2.3.x

• Vuetify.js 2.3のData iteratorsコンポーネントについて

ソースコード

記事にしたコードはGitHubのリポジトリで、ビルド結果はGitHub Pagesで公開しています。

• rubytomato / demo-vue-vuetify-v2
  • GitHub Pages : https://rubytomato.github.io/demo-vue-vuetify-v2/
• rubytomato / demo-vue-vuetify-v2-app
  • GitHub Pages : https://rubytomato.github.io/demo-vue-vuetify-v2-app/
• rubytomato / demo-vue-vuetify-v2-tables