• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

336
Vistas
Selector de color Vuetify @entrada

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?

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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.

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda