如何向 v-data-table 添加点击事件？

Question

我想在单击表行时调用 editItem 函数。当前发生的事情是我单击表格行并且它不显示详细信息页面。然而，当我把这个点击事件放在一个特定的表数据上时，editItem 函数被调用。如何在表行本身上调用相同的函数？

在我的代码中，我尝试使用 v-data-table 模板和插槽，并在行上包含单击事件，但它也不起作用

<template slot="items" slot-scope="props">
   <tr @click="editItem(item), selected = item.id">
      <td>{{ props.item.member }}</td>
      <td>{{ props.item[1] }}</td>
      <td>{{ props.item[2] }}</td>
      <td>{{ props.item[3] }}</td>
      <td>{{ props.item[4] }}</td>
      <td>{{ props.item[5] }}</td>
      <td>{{ props.item[6] }}</td>
      <td>{{ props.item[7] }}</td>
      <td>{{ props.item[8] }}</td>
      <td>{{ props.item[9] }}</td>
      <td>{{ props.item[10] }}</td>
      <td>{{ props.item[11] }}</td>
      <td>{{ props.item[12] }}</td>
      <td>{{ props.item[13] }}</td>
    </tr>
</template>

我希望当单击该行时，将调用 editItem 函数

Answer 1

我找到了解决方法 @click:row

<v-data-table :headers="headers" :items="desserts" :items-per-page="5"
    class="elevation-1" @click:row="handleClick">
</v-data-table>

该handleClick函数返回所单击项目的值，因此我调用了我想对方法中的值进行操作的handleClick方法。我还手动突出显示了点击的行，因为我没有找到这样做的 Vuetify 方式。

handleClick 方法的示例如下：

handleClick(value) {
    this.highlightClickedRow(value);
    this.viewDetails(value);
},

您还可以使用 event.target 访问单击的行。例子在这里

highlightClickedRow(value) {
    const tr = value.target.parentNode;
    tr.classList.add('highlight');
},

Answer 2

我得到了另一个突出显示的解决方案。因为 Anjayluh 的想法对我不起作用。

在 Vuetify 2.0.0

模板

<v-data-table 
  :headers="headers"
  :items="desserts"
  :class="[item.selected && 'selected']"
  @click:row="handleClick"
/>
...
</v-data-table>

和脚本方法

handleClick(row) {
    // set active row and deselect others
    this.desserts.map((item, index) => {
        item.selected = item === row

        this.$set(this.desserts, index, item)
    })

    // or just do something with your current clicked row item data
    console.log(row.sugar)
},

和一种风格

.selected {
    background-color: red
}