今回はこれまで作ったフォーム周りを整えようと思いまして、
一覧に検索機能・詳細表示で日付をフォーマット・フォーム日付入力をdatepickerに
という修正を加えました。
一覧に検索機能
テスト送信でだいぶデータが増えてきたので、検索できるようにしました。
コードはシンプルに公式ドキュメントのものです。
今回は実装していませんが、filterableをうまく使えば複数条件での検索も作れるのでしょうか。
詳細表示で日付をフォーマット
こちらの記事の、Vue3でのやり方を参考に実装してみました。
フォーム日付入力をdatepickerに
日付入力をdatepickerを使用するように修正しようと思い立った時は、入力フォームの隣にカレンダーアイコンを表示して、そこをクリックするとdatepickerが表示される という形にしようとしていました。
ですがこちらの記事のやり方の方がコードがシンプルかつ面白いなと思ったので、こちらを参考にさせていただきました。
便利かどうかはさておき、v-menuがこういう使い方もできるというのは考えつかなかったので、勉強になりました。
この『VueでWEBアプリ』シリーズのコードをgithubで公開しています。参考までに。