How to make a color mixer in vue.js?

Question

Vue.js

Hello. How to make a mixer to change colors. I made this example ( https://zaladdin.github.io/praktika.github.io/ ). But I need to have 3 fields for entering values, each of them which will correspond to the values ​​of R, G, B . That is, change the background color using the background'a rgb parameter, and not just background.

Answer 1

Let's create an object that will contain the color components:

colorComponents: {
  r: 0,
  g: 0,
  b: 0,
},

Based on this object, we will create controls for the values ​​of the color components:

<div v-for="(v, k) in colorComponents">
  {{ k }}
  <input v-model="colorComponents[k]" type="range" min="0" max="255">
  {{ v }}
</div>

And we style some element, calculating the final color:

computed: {
  style() {
    return {
      'background-color': `rgb(${Object.values(this.colorComponents).join(',')})`,
    };
  },
},

jsfiddle.net/o1xe8gmk/1