Vue JS поменять :style в v-for

Question

Есть массив, из которого через v-for создаётся таблица.

<div class="table">
            <div class="column"
                v-for="(column, columnIndex) in table"
                >
                <div class="row"
                    v-for="(row, rowIndex) in table[columnIndex]"
                    :style="{ 'background-color': row }"
                    @click="tableClick(columnIndex, rowIndex)">

                </div>
            </div>
        </div>

data() {
        return {
            table: [
                ['white', 'white', 'white', 'white', 'white', 'white', 'white', 'white'],
                ['white', 'white', 'white', 'white', 'white', 'white', 'white', 'white'],
                ['white', 'white', 'white', 'white', 'white', 'white', 'white', 'white'],
                ['white', 'white', 'white', 'white', 'white', 'white', 'white', 'white'],
                ['white', 'white', 'white', 'white', 'white', 'white', 'white', 'white'],
                ['white', 'white', 'white', 'white', 'white', 'white', 'white', 'white'],
                ['white', 'white', 'white', 'white', 'white', 'white', 'white', 'white'],
                ['white', 'white', 'white', 'white', 'white', 'white', 'white', 'white'],
            ]
        }
    },
    methods: {
        tableClick(i, j) {
            this.table[i][j] = 'red';
        }
    }

Через метод tableClick я меняю значения массива на другие цвета. Если просматривать через консоль, массив меняется, но :style в v-for не меняется, должен смениться цвет ячейки. Если менять цвета в массиве с самого начала, например, писать 'red', то ячейка окрашивается.

Необходимо динамически менять цвет ячейки при клике на неё.

Answer 1

const app = new Vue({
  el: "#app",
  data() {
    return {
      table: [
        [
          "white",
          "white",
          "white",
          "white",
          "white",
          "white",
          "white",
          "white",
        ],
        [
          "white",
          "white",
          "white",
          "white",
          "white",
          "white",
          "white",
          "white",
        ],
        [
          "white",
          "white",
          "white",
          "white",
          "white",
          "white",
          "white",
          "white",
        ],
        [
          "white",
          "white",
          "white",
          "white",
          "white",
          "white",
          "white",
          "white",
        ],
        [
          "white",
          "white",
          "white",
          "white",
          "white",
          "white",
          "white",
          "white",
        ],
        [
          "white",
          "white",
          "white",
          "white",
          "white",
          "white",
          "white",
          "white",
        ],
        [
          "white",
          "white",
          "white",
          "white",
          "white",
          "white",
          "white",
          "white",
        ],
        [
          "white",
          "white",
          "white",
          "white",
          "white",
          "white",
          "white",
          "white",
        ],
      ],
    };
  },
  methods: {
    tableClick(i, j) {
      this.$set(this.table[i], j, 'red')
    },
  },
});

.row {
  width: 30px;
  height: 30px;
  border: 1px solid;
}

.table {
  display: flex;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>


<div id="app">
  <div class="table">
    <div class="column" v-for="(column, columnIndex) in table">
      <div class="row" v-for="(row, rowIndex) in table[columnIndex]" :style="{ 'background-color': row }" :key="rowIndex" @click="tableClick(columnIndex, rowIndex)">
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Vue JS поменять :style в v-for

Ответы (1 шт):