vuetifyのv-data-tableでsort-iconを変更したかった

手っ取り早く解決したい方へ

qiita.com

環境

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'}"
>