CODEWITHSUNDEEP
javascriptvue.js
Odyssee
Odyssee

Reputation: 2463

vuejs make a row clickable with pointer

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?

Upvotes: 1

Views: 5294

Answers (1)

thibautg
thibautg

Reputation: 2052

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>

Upvotes: 3

Related Questions