Whenever hovering on the v-sheet, getBlueColor() function that is inside the v-hover is called. why it happened like that?
exemple code
<template>
<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>
</v-sheet>
</v-hover>
</v-row>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
export default defineComponent({
methods: {
test() {
console.log('test')
},
getBlueColor() {
console.log('Call function')
return 'color:blue;'
},
},
})
</script>
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)
<button
class="flex items-center w-auto p-4 text-center ..."
:class="[
callToAction.types[color][variant],
{ 'opacity-50 cursor-not-allowed shadow-none': disabled },
]"
>
Nice flexible button
</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.