

Nuxtを使用し、v-data-tableの行番号を取得したい。

下記のようなコードにおいて、クリックした行の番号を取得する方法に悩んでいます。  
取得した行番号は、methodsで使用したいです。

[code]

                <v-data-table :headers="headers" :items="todos" @click:row="clickRow">
                  <template v-slot:item="{ item }">
                    <tr>
                      <td>{{ item.state}}</td>
                      <td>{{ item.name }}</td>
                      <td>{{ item.limit }}</td>
                      <td>{{ item.share }}</td>
                      <td><v-icon class="mr-2">mdi-pencil</v-icon>
                      <v-icon class="mr-2">mdi-delete</v-icon></td>
                    </tr>
                  </template>
                </v-data-table>
    
[/code]

[code]

    <script>
    import { mapActions } from "vuex";
    
    export default {
      data() {
        return {
          headers: [
            { text: "状態", value: "state", align: "left" },
            { text: "Todo", value: "name", align: "left" },
            { text: "期限", value: "limit", align: "left" },
            { text: "公開", value: "share", align: "left" },
            { text: "編集/削除", value: "actions", align: "center" },
          ],
          todos: [省略],
        };
      },
      methods: {
        //クリックした行データを取得
        clickRow(row) {
          const rowNumber = this.todos.indexOf(row);
          console.log(rowNumber);
        },
      },
    };
    </script>
    
[/code]

### 試したこと

@click:row="clickRow"を下記のように、挿入してみたが、上手くいきませんでした。

[code]

    <v-data-table :headers="headers" :items="todos" @click:row="clickRow">
    
[/code]

### その他

もし解決策が分かる方がいらっしゃいましたら、教えていただけると大変たすかります。  
どうぞよろしくお願いいたします。


CC BY-SA 4.0
2021-08-02T09:30:48.933
80544
2021-12-14T18:03:30.483
2021-08-02T10:01:46.947
3060
47310
question
vue.js nuxt.js
v-data-tableの行番号を取得したい。


利用されているitemのslotで行indexがあるようなのでそちらを利用したらよさそうです

<https://vuetifyjs.com/ja/api/v-data-table/#api-slots>

[code]

    <v-data-table :headers="headers" :items="todos">
      <template v-slot:item="{ item, index }">
        <tr @click:row="clickRow(index)">
            <td>{{ item.state}}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.limit }}</td>
            <td>{{ item.share }}</td>
            <td><v-icon class="mr-2">mdi-pencil</v-icon>
            <v-icon class="mr-2">mdi-delete</v-icon></td>
        </tr>
      </template>
    </v-data-table>
    
[/code]


CC BY-SA 4.0
2021-08-02T14:34:38.430
80548
2021-08-02T14:34:38.430
298
80544
answer