【Vuetify】v-data-tableでsortが効かないｯ…！？

どうもこじらです。

久しぶりの記事投稿になってしまいました。書きたい記事は色々あるんですが…。

特にここ1年くらいで、受動意識仮説の考え方を知って、ヒトの脳の使い方というか、ヒトの”優秀さ”の部分についてかなり理解が深まりました。その辺を記事にして言語化したいところなんですがねぇ…。

まぁいいや。本題に入ります。

v-data-tableでの凡ミスと対処法

以下のようなテーブルをv-data-tableで作成しました。

見ての通りポケモンの一覧を表示させるものです。

v-data-tableの機能として、ヘッダ部分をクリックすると並び替えてくれるものがあります。

この並び替えの機能が一部の列でしかできず、焦りました。

結論としては、v-data-tableのheadersに渡している配列の設定値に誤りがあるだけでした。

上記の例でv-data-tableのitemsのPropsに渡しているデータの構造は以下の通りです。CP以外の値は、一つ中の連想配列に持っています。

[
  { goPokedex: { ここに色々な値を入れている }, cp: 値 },
  ...
]

この場合、以下のように指定する必要があります。

      headers: [
        { text: '№', value: 'goPokedex.pokedexId' },
        { text: '', sortable: false, width: '52px' },
        { text: 'ポケモン', value: 'goPokedex.name' },
        { text: 'タイプ', value: 'goPokedex.type1' },
        { text: 'こうげき', value: 'goPokedex.attack' },
        { text: 'ぼうぎょ', value: 'goPokedex.defense' },
        { text: 'HP', value: 'goPokedex.hp' },
        { text: 'CP', value: 'cp' }
      ]

「.」で指定すれば中の構造に対してもアクセスして並び替えることができます。

これを「goPokedex.」を付けず「pokedexId」のみvalueに設定していたためソートできないだけでした。

いやー私と違ってVuetifyは優秀ですねぇ…。

こじらでした

じゃ