我有一个像这样的v形数据表
// 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}});
},
每当用户单击一行中的任意位置时，我希望获得一个项目(一行)的caseId属性，并将该caseId作为路由参数移动到另一个页面.这不管用.我该怎么解决这个问题？非常感谢.
从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."
也就是说
@click:row="(item) => clickRow(item.caseId)" ❌
应该是:
@click:row="(_, item) => clickRow(item.caseId)" ✅
(其中_是单击的单元格数据，以备需要).
我倾向于只指定处理程序:
@click:row="onRowClick"
并管理处理程序中的参数:
methods: {
onRowClick(cellData, item) {
// go wild...
}
}
console.log()是你的朋友.@click:row="onRowClick"
...
methods: {
onRowClick(...args) {
// this will log all arguments, as array
console.log(args);
}
}