1

I have a table and the row has to be clickable. This click should fire a function in the parent component. The example below actually works, but it gets messy. Normally I would wrap the row in a <router-link> tag, but one cell has a value that may not be clicked. 

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

Is it possible to write this shorter? I already tried to use a custom directive, but I can't get it to work. 

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

Something like this would be ideal, any ideas on how I can achieve this?

Odyssee
  • 2,393
  • 2
  • 19
  • 38
  • 1
    Possible duplicate of [How can I make the cursor a hand when a user hovers over a list item?](https://stackoverflow.com/questions/3087975/how-can-i-make-the-cursor-a-hand-when-a-user-hovers-over-a-list-item) - your requirement has very little to do with your choice of framework, this is just CSS. – Tom Fenech Jun 04 '18 at 14:33

1 Answers1

3

The easiest way is to use a custom css class class="pointer":

In <template>:

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

in <style> or <style scoped>:

<style>
.pointer {
  cursor: pointer;
}
</style>
thibautg
  • 2,004
  • 1
  • 14
  • 17
  • 1
    Better would be to add a meaningful class name which describes what the rows represent rather than one that describes how they look/behave. – Tom Fenech Jun 04 '18 at 14:36