Cliquez n'importe où dans la ligne de v-data-table et passez à une autre page

J'ai une v-data-table comme celle-ci

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

Je souhaite obtenir la caseIdpropriété d'un élément (une ligne) chaque fois que l'utilisateur clique n'importe où dans une ligne et passe à une autre page avec cela caseIden tant que paramètres de route. Cela ne fonctionne pas. Comment puis-je réparer ça? Merci

Solution du problème

De la doc:

"Cet événement fournit 2 arguments : le premier correspond aux données de l'élément sur lequel on a cliqué et le second correspond aux autres données associées fournies par l'emplacement de l'élément."

Ce qui signifie

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

devrait être:

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

(où _sont les données de la cellule cliquée, au cas où vous en auriez besoin).

J'ai tendance à ne spécifier que le gestionnaire :

@click:row="onRowClick"

et gérer les paramètres dans le gestionnaire :

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

Toujours lire les docs

console.log()est votre ami.

Lorsque vous vous sentez paresseux (comme je le fais la plupart du temps), ignorez l'étape 1 et activez l'étape 2.
Répartissez et enregistrez tous les arguments :

@click:row="onRowClick"

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