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">

<{1>}或<style>中的

：

<style scoped>

vuejs用指针点击一行

1 个答案: