• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

338
Views
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?

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

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.

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error