まずはサンプル
機能の違いが多少ありますが、下記記事のVueJS版になります。
jQueryを使った複数条件(and,or入り混じり)の絞り込みを実装する
表示しているのはこちらの記事で使ったお店のリストの改良版です。
今回は管理するデータがより多く複雑になったので、データはjson形式でまとめてaxiosで読み込んでいます。
絞り込みの条件
グループ化されたカテゴリがあり、同グループ内を複数選択した場合はor（和食||洋食）、グループを跨いで選択した場合はand（和食||洋食&&肉）での絞り込みになります。
またフリーワード検索を作り、これもフリーワード&&選択したカテゴリというふうにandで絞り込まれます。
jQuery版との比較
データバインディングの面でVueが圧倒的に優れています。さすが。
そのおかげでjsのソースもシンプルに書くことができました。
必然的にオブジェクト指向に則って書いていくので、ソースが整理されて見やすくわかりやすいです。
またVueのtransitionクラスを利用して切り替えのインタラクションを簡単に作ることができました。
今後実装したいもの
- URLにパラメータ付与
jQuery版にあったやつ。管理する情報が増えたので書き方を新しく考えないと..。 - フリーワード検索の改良
微妙に挙動が怪しいことに気づいた。。
大文字小文字を区別しないようにしたいのと、URLを検索の対象から外したほうが良さそうか。 - 複数キーワードでの検索
今は単一キーワードでの絞り込みしかできないので、スペース区切りで複数入力された場合の処理が必要。- その場合はand検索のほうが良いか？
- 時間による絞り込み
開店時間で絞り込んだり、早い順でソートしたりできればよいかなと。
インターフェースはプルダウン？
実装しました！！
input="time"で選ぶor現在時刻を設定して絞り込めるようになっています。折角項目があるから..と置いてみたものの、管理するデータによってはほぼ死に機能になりそう。 - json更新のシステム
手動でもいいけど、PHP等の勉強用に作ってみたい。 - 非表示時のインタラクション
これはどうしようもないかもしれないけど、非表示のものが左上に集約されていくのがちょっと面白..気持ち悪い。
おそらくflex配下の要素にposition:absolute;を指定すると親要素基準で左上に移動してしまうせい（初めて知った）。
flexをやめると高さ揃えをjsでやることになるしうーん。
感想
jsonを手動で作成し管理するなんてことを初めてやりましたが、このインターフェースを組み合わせれば色々できそうですね。
何かの実績を整理してみたり、読んだ本や見た映画をまとめてみたり、料理のレシピを材料やジャンル別でカテゴライズしてみたり...。
思いついたら自分用にでも使ってみようと思います。