0

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

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

            <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>
<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>

試したこと

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

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

その他

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

1 件の回答 1

1

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

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

<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>
1
  • ありがとうございます。
    – kondo
    2021年10月29日 14:50

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。