Vuetify clickable icon inside data-table doesn't change pointer style

Question

I have a v-data-table like this one:

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      :items-per-page="5"
      class="elevation-1"
    >
      <template v-slot:item.iron>
        <v-icon @click.native="getDocument">mdi-download</v-icon>
      </template>
    </v-data-table>
  </v-app>
</div>

but whenever I move the mouse over the download icon it doesn't change its style from pointer to hand but I don't know why. How can I fix this issue?

Answer 1

You are using @click.native. Vuetify won't be able to understnad that you have a click listener. Under the hood Vuetify has something like this:

<div class="icon icon-x" :styles="styles"/>

<script>
  export default {
    computed: {
       styles() {
         const base = {};

         if (this.$listeners.click) base.cursor = 'pointer';

         return base;
       }
    }
  }
</script>

Of course, things are a litle bit more complicated than that. To resolve your issue you can either use @click or add a utility class to the icon:

.cursor-pointer {
  cursor: pointer;
}

...

<v-icon class="cursor-pointer" @click.native="getDocument">mdi-download</v-icon>