vuetifyのv-data-tableでsort-iconを変更したかった
手っ取り早く解決したい方へ
環境
vuetify 2.2.26
経緯
以前、v-data-tableのsort-iconを変更したが、defaultのsort-iconに戻っていた。 いろいろ検索したがなかなか見つからなかったので、メモ
やったこと
1ググった
'sort-icon' has been removed, use 'header-props.sort-icon' instead.
特徴的なエラーメッセージがでていたので、同じ問題に遭遇した人はいるだろうと思ってググったが全く良い答えが出てこなかった
2:ソースコードから探した
header-props.sort-icon
に置き換えろというエラーなので、実装されているだろうと思い、vuetifyに検索を行った
https://github.com/vuetifyjs/vuetify/blob/239e238d69f35064db55e9f41db8fd832f347ab5/packages/vuetify/src/components/VDataTable/VDataTable.ts#L171
なかなかいいのが出てきたが解決には至らなかった
// これがみつかったので ['sort-icon', 'header-props.sort-icon'], // こんな実装にしてしまった(おしい) <v-data-table header-props.sort-icon='delete' >
3:ぐぐった
"header-props.sort-icon" ダブルクォーテーションで囲むことで、このキーワードを含む結果を探した。
https://github.com/vuetifyjs/vuetify/issues/9402
ドキュメントが存在しないことがわかった。
自分が困っている箇所にはドキュメントがあるよ!とドキュメント内に書かれているが、存在しない
PRがマージされていることに気づいたがまだ、ドキュメントに反映されていないようだった
4:考えた
2で実装したものを見直して、header-props.sort-icon='delete'
ドット区切りで属性指定できたか?という疑問が生じたので下記の実装にしたところうまく言った
<v-data-table
:header-props="{'sort-icon': 'delete'}"
>