处理自定义行点击答案

【问题标题】：Handle custom row click处理自定义行点击
【发布时间】：2020-05-31 10:15:56
【问题描述】：

<v-data-table
      :headers="headers"
      :items="medications"
      @click:row="detail"
      class="elevation-23"
    >

这就是我在 v-data-table 中包含@click:row 的方式。这样，当单击该行时，就会调用 detail 函数。但是我在行中有一些列用于编辑和删除选项。单击该按钮时，我希望调用我定义的其他一些函数。但是当我点击那个edit or delete选项时，details函数被调用了。

当 Actions 列被点击时，如何阻止 @click:row 调用 detail 函数。

【问题讨论】：

您可以在这个特定的“动作”列而不是整行上附加单独的函数（事件处理程序）；换句话说，你不想使用@click:row。

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

为防止点击事件传播到父行，您应该在子行（操作按钮）中使用 .stop 修饰符：

<v-btn @click.stop="edit">Edit</v-btn>

【讨论】：