• Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Precios
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

242
Vistas
Vuetify Color picker @input

I am using the Vuetify color picker to change the background and text colors of my elements. Currently, I am storing the hex color values in Firestore. Using @input="updateColor" as an attribute on the v-color-picker I am calling the function to store the value in Firestore.

The problem is that @input gets called every time the mouse is moved when selecting a color. Because of this, my code is making a lot of update calls to Firestore. For example, when sliding from white to black in the color picker it makes around 100 calls to the function.

This is my code:

v-color-picker HTML:

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

updateColor function:

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)
    });
}

When looking at the v-color-picker-api there are 3 events (input, update:color, update:mode). I have tried the @update:color event but it produces the same result. And @update:mode is not used for selecting colors.

Ideally I do not want to use a button to apply the color.

I am using Vue 2 with the composition API. How can I make fewer calls to Firestore?

9 months ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

My advice is to add an APPLY button - upon clicking on it you will store the v-model of the color picker into Firebase. Or even better - put a button named PICK COLOR in the place of the color picker, this button will open a dialog with the color picker and buttons APPLY and CANCEL. Then you can store the value in Firebase upon clicking on that APPLY button.

9 months 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 empleo Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.