Skip to content

Why the function that inside the v-hover is called every times whenever hovering

Whenever hovering on the v-sheet, getBlueColor() function that is inside the v-hover is called. why it happened like that?

exemple code

  <v-row justify="center" align="center">
    <v-hover v-slot="{ hover }">
      <v-sheet width="100" height="100" style="border: white" :style="hover ? 'background-color: white' : ''">
        <span :style="getRedColor()"> why </span>

import { defineComponent } from '@vue/composition-api'

export default defineComponent({
  methods: {
    test() {
    getBlueColor() {
      console.log('Call function')
      return 'color:blue;'

And It is result after 5times hovering on the v-sheet

(10) Call function func.getBlueColor



On top of what was told above, I do recommend the second part of my answer here to have a fully flexible styling (section How I do personally handle this kind of flow)

  class="flex items-center w-auto p-4 text-center ..."
    { 'opacity-50 cursor-not-allowed shadow-none': disabled },
  Nice flexible button

With a whole CSS object mapped to the received props.
It works even better if you have an utility-first CSS framework, like Tailwind.

User contributions licensed under: CC BY-SA
6 People found this is helpful