Add routerlink to Vuetify data table row-CodePudding

I have a v-data-table that gets the data from API. I want to make the rows clickable and if the user clicks one row, it will open another route and show the complete data from that one row. How to make this happen with v-data-table?

template

<v-data-table
        :headers="headers"
        :items="visitors"
        :search="search"
        
>

data

data() {
    return {
      visitors: []
    }
}

methods

async created() {
    try {
      const res = await axios.get(`http://localhost:3000/visitors`);
      this.visitors = res.data;
    } catch (e) {
      console.error(e);
    }
}

I'm confused as to where I should put the router link? Or is there any other way to achieve this? Thank you.

CodePudding user response：

on v-data-table you can add @click:row="yourMethod". Here's an example:

<v-data-table
        :headers="headers"
        :items="visitors"
        :search="search"
        
        @click:row="openDetails"
>

and then your method (just an example):

openDetails(val) {
  this.$router.push("details/"val.id)
}