Estoy usando el selector de color de Vuetify para cambiar los colores de fondo y de texto de mis elementos. Actualmente, estoy almacenando los valores de color hexadecimales en Firestore. Usando @input="updateColor" como un atributo en el v-color-picker , llamo a la función para almacenar el valor en Firestore.

El problema es que se llama a @input cada vez que se mueve el mouse al seleccionar un color. Debido a esto, mi código realiza muchas llamadas de actualización a Firestore. Por ejemplo, al deslizar de blanco a negro en el selector de color, realiza alrededor de 100 llamadas a la función.

Este es mi código:

v-color-selector HTML:

 <v-color-picker dot-size="25" mode="hexa" v-model="background.color" @input="updateColor" ></v-color-picker>

función actualizarColor:

 const updateColor = () => { const data = { backgroundColor: background.value.color, textColor: text.value.color } console.log("Update"); // Storing the data in firestore currentPage.updateComponent(props.component.uid, data) .catch((error) => { app.setError(error) }); }

Al observar v-color-picker-api , hay 3 eventos (entrada, actualización: color, actualización: modo). Probé el evento @update:color pero produce el mismo resultado. Y @update:mode no se usa para seleccionar colores.

Idealmente, no quiero usar un botón para aplicar el color.

Estoy usando Vue 2 con la API de composición. ¿Cómo puedo hacer menos llamadas a Firestore?