Vuetify には v-data-table というフィルタやページネーションなど便利な機能を備えたテーブルコンポーネントがある。
カラムのごとの設定できるheadersと言う props があり、カラムごとのフィルタを設定するには下記のようにfilter
にフィルタ用関数を渡せばよい。
フィルタ関数はアイテム情報やクエリを引数として受けとりマッチしたかどうかを boolean で返す関数だ (下記の例では必ず true を返している)。
このfilter
は Vuetify2 からあり Vuetify3 でも最近(3.6.8)で実装された。
上記のコードを Vuetify2 に食わせると filter が true を返すため必ずすべてのアイテムが表示される。しかし、Vuetify3 では何もマッチしない.
これはfilter-mode
という props のデフォルトが intersection
となっているための様子。
intersection
のドキュメントを見ると…
intersection: There is at least one match from the custom filter, and all columns match the custom key filters.
「少なくとも 1 つのカラムでcustom-filter
がマッチして、かつ、すべてのcustom-key-filter
がマッチしたものがマッチする」挙動らしい。
custom-filter
というのはcustom-key-filter
を使っていないカラムに適用されるフィルタ関数であり、上記の例のようにすべてのカラムに対してfilter
を設定している場合はcustom-filter
が少なくとも 1 つマッチすることはありえないため何もマッチしないという動きになっているようだ。
Vuetify2 にもfilter-mode
はあってデフォルトはintersection
である。intersection
はドキュメントで下記のように説明されている。
intersection: There is at least one match from the default filter, AND all custom column filters match.
Vuetify3 ではcustom filter
となっているところがdefault filter
になっている以外は同じに内容に読める。
更に今回は custom filter は使っていないので Vuetify3 のドキュメントの custom filter は default filter と読み替えてもよいため、この場合同じ内容になるはずだ。
しかし Vuetify2 と Vuetify3 では挙動が異なる。
ということで何が正しいのかわからないのでイシューを作成した。
ちなみに workaround としてfilter-mode
をevery
にすれば全カラムにfilter
を設定している場合に全 filter がマッチした場合のアイテムを返すことができるようになる。
Vuetify2 の intersection は Vuetify3 の every と同じ挙動になっているように見える。Vuetify3 の intersection のユースケースは何なんだろう。