はじめに
最近とある機能でVuetifyを使う機会がありました。
初めての使用だったので色々わからないことも多く公式ドキュメントをひたすら行ったり来たりしていました。
今回はその時調べたことなどをメモ的に置いておきます。どなたかの参考になれば幸いです。
環境
Vue v2.6.14
Vuetify v2.5.10
レイアウト編
v-col ? v-flex ?どちらを使うべき？
Vuetifyのレイアウトについてネットで調べるとv-colやv-flexというコンポーネントが出てきます。
これらコンポーネントはグリッドレイアウトを作るときに主に使いますがどれを使えばいいの？と迷うかもしれません。
結論から言うと、最新のバージョンではv-colを使えば問題ありません。（v-flexを使うこともできます）
1.5系から2.0系へのアップデートで以下のように置き換わっています。
v-layout --> v-row
v-flex --> v-col
アイコン付きボタンを作るときのひと手間
Vuetifyではボタンはv-btn、アイコンはv-iconを使います。シンプルに作るなら以下のような構成になると思います。
<v-btn><v-icon>mdi-plus</v-icon>登録する</v-btn>
アイコンが左側にあるときv-iconに対してleft propsを設定するとアイコンに対して余白などをいい感じに調整してくれます。
<v-btn><v-icon left>mdi-plus</v-icon>登録する</v-btn>
このように組み合わせる際にいい感じに見た目を調整してくれるpropsが他にもコンポーネントに用意されていたりするので、知っておくとスマートに書けます。
通知のコンポーネントどれ使う？
何かしらのユーザー操作の後に成功や失敗を通知したい場合はsnackbarsを使いましょう
小窓を開いてユーザーに何かしらのタスク操作や重要な情報の確認・意思決定を促す場合はdaialogsを使いましょう
それ以外のアプリケーション側からのお知らせはalertsを使いましょう。
Vuetifyはマテリアルデザインを採用しているのでマテリアルデザインの文脈に沿った使い方をするのがベターです。
要望・トラブル解決編
テキストフィールドのカウンターで特定の文字列を省いた文字数を使いたい
テキストフィールドでv-text-fieldを使いカウンターを表示している場合の話です。
空白や特定の記号があるとその分の文字数がカウントされてしまうので省きたいという話だったのですが、v-text-filedにはしっかりと用意されていました。
couter-value propsに関数を渡すことでやりたいことが出来ます。
以下の例は正規表現で空白を削除した文字数を返すようにしています。
<v-text-field
value="text"
counter="10"
:counter-value="v => v.replace(/\s+/g, '').length"
></v-text-field>
v-checkboxを使っている時に:valueが上手く動作しない
v-modelを使わず、:valueを使いたいシーンがあったのですがv-checkboxでは意図した動きにならず困りました。結論から言うとinput-value propsを使うことで解決できました。
<v-checkbox
:input-value="checked"
></v-checkbox>
v-checkboxの場合は、v-modelを input-valueと@changeのように分解できます。
以下の記事が参考になりました。
おわりに
今回初めて触ってみましたが、複雑な要件ではない管理画面などをサッと作るのにVuetifyという選択肢はありだなと思いました。
来年Vue3に対応したVuetify3が正式リリースされる予定なのでこちらも楽しみです。