单击 v-data-table 行中的任意位置并移动到另一页

Question

我有一个像这样的 v-data-table

// 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 作为路由参数移动到另一个页面.这是行不通的。我该如何解决？谢谢

Answer 1

来自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()是你的朋友。
当你感到懒惰时（就像我一样，大多数时候），跳过第 1 步并启动第 2 步。
传播并记录所有参数：

@click:row="onRowClick"

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

单击 v-data-table 行中的任意位置并移动到另一页

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

vue.js