Vuetify3でリリースされたv-data-tableのclick:rowイベントを動かしたい

Question

実現したいこと

Vuetify3でリリースされたv-data-tableの#click:rowイベントを動かしたい

前提

初心者です。
vueでアプリを作成しており、Vuetify3の機能が充実してきたため、
vue2→vue3の移行を検討しています。
vuetifyのサンプルコードを元に、データの表示ができるところまでは実装できました。

vue2

vue3

該当行をクリックすると、データが取得できる処理を実現したく、
@click:row="showItem"の処理を追加しました。
vue2で動いていた処理をそのままvue3にも記載しましたが、vue3では動かなくなりました。
（下記、console.logで確認）

https://v2.vuetifyjs.com/ja/api/v-data-table/#events-click:row
https://vuetifyjs.com/en/api/v-data-table/#events-click:row

v-data-tableは現在開発中のため、該当の処理が現在動かない状態になっているのか
それとも書き方が変わっており、修正が必要なのかわかりませんでした。
ご存知の方いらっしゃいましたらご教授いただきたく、どうかよろしくお願いいたします。

発生している問題・エラーメッセージ

<vue2>
calories: 159
carbs: 24
fat: 6
iron: 1
name: "Frozen Yogurt"
protein: 4

<vue3>
PointerEvent {isTrusted: true, _vts: 1676603959301, pointerId: 1, width: 1, height: 1, …}

該当のソースコード

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    item-key="name"
    class="elevation-1"
    @click:row="showItem"
  ></v-data-table>
</template>

<script>
  export default {
    data: () => ({
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: 1,
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: 1,
        }
      ],
    }),
    methods: {
      showItem(item){
        console.log(item)
      }
    }
  }
</script>

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    item-value="name"
    class="elevation-1"
    @click:row="showItem"
  ></v-data-table>
</template>

<script>
  export default {
    data () {
      return {
        headers: [
          {
            title: 'Dessert (100g serving)',
            align: 'start',
            sortable: false,
            key: 'name',
          },
          { title: 'Calories', align: 'end', key: 'calories' },
          { title: 'Fat (g)', align: 'end', key: 'fat' },
          { title: 'Carbs (g)', align: 'end', key: 'carbs' },
          { title: 'Protein (g)', align: 'end', key: 'protein' },
          { title: 'Iron (%)', align: 'end', key: 'iron' },
        ],
        desserts: [
          {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: 1,
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: 1,
          }
        ],
      }
    },
    methods: {
      showItem(item){
        console.log(item)
      }
    }
  }
</script>

補足情報（FW/ツールのバージョンなど）

vue2
"vue": "^2.6.14",
"vuetify": "^2.6.0",

vue3
"vue": "^3.2.47",
"vuetify": "^3.1.5",

Answer 1

https://next.vuetifyjs.com/en/api/v-data-table/#events
vuetify3の機能はこちらのページに乗っています
左上にバージョンが出ているのでそこから3.x系に変えるとvuetify3のリファレンスを見ることができます。vuetify2とくらべてコンポーネントごとにすこし仕様が変わっているので把握しておくと良いです

自分もうまく把握していないのですが最初の引数はEventになっているようです
itemは２つ目の引数になっているので以下のような関数で取れることを確認しました
（2/18 18:56 columnsプロパティの記載を忘れていたため追加）

showItem(event, values){
  console.log(values.item.columns)
}

ちなみに説明の英語は「返り値の最初の値はアイテムデータ」ってあるのですが、戻り値を見ると明らかに１つ目はEvent、２つ目にObjectなのであっていない模様…（たぶんvuetify2のものをそのまま引用してる？）

itemはproxy型になっており、各列データはitem.columns.Calories等で取得できると思います
回答になっていたら幸いです

Comments

[hishima]

ご丁寧に説明いただき、ありがとうございます。
2つ目の引数を指定することで取得できました！
英語の説明が2系の説明のままで、混乱しておりました。