[Vuejs]-How to dynamic change the background color of div using color picker/color swatches using VUE JS

by

0👍

Your Codepen binds div.hasPicked‘s background color to isFontColorSelected (a color value):

<div class="hasPicked" :style="{backgroundColor: isFontColorSelected}">

…but only the swatch selector is bound to isFontColorSelected. The color picker is bound to a different variable: isFontColorPicked (which seems otherwise unused).

<input type="color" v-model="isFontColorPicked">

The fix is to bind the color picker to the same variable as the others:

<input type="color" v-model="isFontColorSelected">
                                      👆

updated codepen

Leave a comment