Как сделать микшер цветов на vue.js?

Question

[Zaladdin]

Здравствуйте. Как сделать микшер для изменения цветов. Я сделал вот такой пример ( https://zaladdin.github.io/praktika.github.io/ ). Но мне надо чтобы было 3 поля для ввода значений каждый из них который будет соответствовать значениям R, G, B . То есть менять цвет фона используя параметр background'а rgb, а не просто background.

Answer 1

[0xD34F]

Создадим объект, который будет содержать компоненты цвета:

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

На основе этого объекта создадим элементы управления значениями компонентов цвета:

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

И стилизуем какой-нибудь элемент, вычисляя итоговый цвет:

<div :style="style">

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

jsfiddle.net/o1xe8gmk/1