vuejs make a row clickable with pointer

Question

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?

Possible duplicate of 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
– Tom Fenech, Commented Jun 4, 2018 at 14:33

thibautg · Accepted Answer · 2018-06-04 13:01:58Z

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>

answered Jun 4, 2018 at 13:01

thibautg

2,0521 gold badge16 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tom Fenech Over a year ago

Better would be to add a meaningful class name which describes what the rows represent rather than one that describes how they look/behave.

Collectives™ on Stack Overflow

vuejs make a row clickable with pointer

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related