vuejs使用指针使行可点击

Question

我有一张桌子，该行必须是可点击的。 此单击应在父组件中触发一个功能。 下面的示例实际上可以工作，但是很混乱。 通常，我会将行包装在<router-link>标记中，但是一个单元格的值可能不会被单击。

<td
  @click.prevent="(!day.submitted || day.rejected ) ? $emit('update', day) : ''" 
  onMouseOver="this.style.cursor='pointer'"
  class="py-0 w-1/4">

可以写得短些吗？ 我已经尝试使用自定义指令，但无法使其正常工作。

<td clickMe>{{ day.hours }}</td>

这样的想法将是理想的，关于如何实现这一点的任何想法？

Answer 1

最简单的方法是使用自定义CSS类class="pointer" ：

在<template> ：

<td
  @click.prevent="(!day.submitted || day.rejected ) ? $emit('update', day) : ''" 
  class="py-0 w-1/4 pointer">

在<style>或<style scoped> ：

<style>
.pointer {
  cursor: pointer;
}
</style>