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?
Mi consejo es agregar un botón APLICAR: al hacer clic en él, almacenará el v-model
del selector de color en Firebase. O incluso mejor: coloque un botón llamado PICK COLOR en el lugar del selector de color, este botón abrirá un cuadro de diálogo con el selector de color y los botones APLICAR y CANCELAR. Luego puede almacenar el valor en Firebase al hacer clic en ese botón APLICAR.