Cada vez que se desplaza sobre la hoja v, se llama a la función getBlueColor() que está dentro de v-hover. por que paso asi?
código de ejemplo
<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>Y es el resultado después de 5 veces de pasar el mouse sobre la hoja v
(10) Función de llamada func.getBlueColor
Además de lo que se dijo anteriormente , recomiendo la segunda parte de mi respuesta aquí para tener un estilo completamente flexible (sección 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> Con un objeto CSS completo asignado a los accesorios recibidos.
Funciona aún mejor si tiene un marco de CSS que prioriza la utilidad, como Tailwind.