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
Advertisement
Answer
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.