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?
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.