CODEWITHSUNDEEP
vue.js
seary
seary

Reputation: 77

Click anywhere in row in v-data-table and move to another page

I have a v-data-table like this

// template
<v-data-table
        :headers="headers"
        :items="visitors"
        :search="search"
        item-key="name"
        class="elevation-1"
        @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

Upvotes: 2

Views: 2027

Answers (1)

tao
tao

Reputation: 90013

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);
   }
 }

Upvotes: 1

Related Questions