Как изменять цвет блоков div?

Question

[Mike]

Есть 10 блоков div. Есть две кнопки redColor and greenColor. После нажатия на одну из кнопок, первый блок дива должен изменить свой цвет на соответствующий кнопке, затем второй блок, третий и так далее.
Сейчас если жмякать на redColor всё работает нормально, но если после жмякнуть на greenColor меняются цвета предыдущих блоков на green. Мне нужно чтоб они сохраняли свои цвета.
Вот что я имею, дальше я не могу сообразить как изменить мой код.

<template>
    <div>
        This is Profile.vue
        <li v-for="(x, i) of 10" :key="i">
            <ul :class="i<=index?mycolor:'black'">
                {{ x }}
            </ul>
        </li>
      <button @click="redColor()">red</button>
      <button @click="greenColor()">green</button>
    </div>
</template>

import { mapGetters } from 'vuex'
export default {
    name: 'Profile',
    data() {
        return {
            index: -1,
            mycolor: '',
        }
    },
    computed: mapGetters({
        profile: 'profile',
    }),
    methods: {
        greenColor: function() {
            this.index++
            console.log(this.index);
            this.mycolor = 'green'
            if (this.index === 10) {
                this.index = -1;
            }
        },
        redColor: function() {
            this.index++;
            this.mycolor = 'red'
            console.log(this.index);
            if (this.index === 10) {
                this.index = -1;
                }
            }
        }
}

Answer 1

[0xD34F]

Очевидно, с помощью одной строковой переменной задать цвет нескольких блоков затруднительно.

Пусть будет массив, элементы которого задают цвет отдельных блоков:

data: () => ({
  items: Array(10).fill(null),
  ...

<ul>
  <li v-for="(n, i) in items" :style="index < i || { color: n }">
    {{ i }}
  </li>
</ul>

Копипастить кнопки и методы для переключения цвета не очень здорово - что если цветов будет не два, а пять? Десять? Сорок? Сделаете сорок разных методов и вручную напишите разметку для сорока кнопок?

Метод оставьте один, а устанавливаемый цвет сделайте его параметром:

methods: {
  next(color) {
    const { index, items } = this;
    this.index = index === items.length - 1 ? 0 : index + 1;
    items.splice(this.index, 1, color);
  },
  ...

А доступные для назначения цвета складываете в массив, на основе которого создаются кнопки:

data: () => ({
  colors: [ 'red', 'lime', 'blue', 'orange', 'magenta', 'aqua', 'yellow' ],
  ...

<button v-for="c in colors" @click="next(c)">{{ c }}</button>

https://jsfiddle.net/wcjkft23/