I have a v-data-table like this

// template
<v-data-table
        :headers="headers"
        :items="visitors"
        :search="search"
        item-key="name"
        
        @click:row="(item) => clickRow(item.caseId)"
      >
</v-data-table>

//script
clickRow(id){
      this.$router.push({name: "VisitDetails", params: {id: id}});
    },

I want to get the caseId property of an item (a row) whenever user click anywhere in a row, and move to another page with that caseId as route params. This doesn't work. How do I fix this? Thank you

CodePudding user response：

From the docs:

"This event provides 2 arguments: the first is the item data that was clicked and the second is the other related data provided by the item slot."

Which means

@click:row="(item) => clickRow(item.caseId)" ❌ 

should be:

@click:row="(_, item) => clickRow(item.caseId)" ✅

(where _ is the clicked cell data, in case you need it).

I tend to only specify the handler:

@click:row="onRowClick"

and manage the params in the handler:

methods: {
  onRowClick(cellData, item) {
    // go wild...
  }
}

1. Always read docs
2. console.log() is your friend.
3. When you feel lazy, (like I do, most times), skip step 1 and power up step 2.
   Spread and log all arguments:

@click:row="onRowClick"

 ...
 methods: {
   onRowClick(...args) {
     // this will log all arguments, as array
     console.log(args);
   }
 }