Vue js table row with info - html

Question

I want to see information when I click to row in the table. I tried #click, router:to but it didn't help. Maybe I should try to make list item instead of data-table?
html code:
<v-data-table v-scroll:#scroll-target="onScroll"
:items-per-page="-1"
hide-default-footer
dense
:headers="headers"
:items="companies"
item-key="name"
class="elevation-1"
></v-data-table>
Vue code below:
<script>
export default {
data: () => ({
companies: [
{
name: "Company",
status: "Active"
},
{
name: "Company2",
status: "Active"
},
{
name: "Company3",
status: "Active"
},
],
headers: [
{
text: "Company name",
align: "start",
sortable: false,
value: "name"
},
{ text: "Status", value: "status" }
],
methods: {
onScroll (e) {
this.companies = e.target.scrollTop
},
}
})
};
</script>
I am using vuetify library. Maybe this is a problem of vuetify and it has different command to make clickeble row in data-table?

Answer 1

Checkout the vuetify data table events: https://vuetifyjs.com/en/components/data-tables/
The first one there is click:row.
So you would have something like:
// template
<v-data-table #click:row="rowClicked"></v-data-table>
// script
export default {
methods: {
rowClicked (item) {
// show something or do your router stuff here
}
}
}
Hope that helps.