I want to get the line number of the v-data-table.

I want to use Nxt to get the line number of the v-data-table.

I'm worried about how to get the number of the line I clicked in the code below.
I would like to use the obtained line number in the 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(){
    US>return{
      headers: [
        { text:"state", value:"state", align:"left"},
        { text:"Todo", value:"name", align:"left"},
        { text: "Time limit", value: "limit", align: "left"},
        { text: "Publish", value: "share", align: "left"},
        { text: "Edit/Delete", value: "actions", align: "center"},
      ],
      todos: Abbreviated,
    };
  },
  methods: {
    // Get clicked row data
    clickRow(row){
      constrowNumber = this.todos.indexOf(row);
      console.log(rowNumber);
    },
  },
};
</script>

Tried

@click: I tried inserting row="clickRow" as below, but it didn't work.

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

Other

If anyone knows the solution, I'd appreciate it if you could let me know.
I look forward to your kind cooperation.

vue.js nuxt.js

2022-09-30 10:29

1 Answers

There seems to be a line index in the slot of the item being used, so I think I should use it

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>

2022-09-30 10:29

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656