Меняются все элементы массива JS

Question

Имеется таблица, генерирующаяся из двумерного массива (array), состоящего из булевых значений:

<table>
    <tr v-for="(row, x) in array">
        <td v-for="(data, y) in row" @click="toggle(x,y)" :class="data?'active':''"></td>
    </tr>
</table>

И соответственно сама функция:

toggle: function(x,y) {
    this.array[x][y] = !this.array[x][y];
}

При нажатии на любую ячейку таблицы значения массива меняются у вех ячеек. Это делал с использованием VUE.js, так же пробовал то же самое делать на чистом JS, однако проблема остаётся. Подскажите, в чём моя ошибка?

Answer 1

Я просто скопировал ваш код, и у меня все работает.

const App = {
  data() {
    return {
      array: [
        [true, false, false, false],
        [true, true, false, true],
        [false, false, true, false]
      ],
    }
  },
  methods: {
    toggle: function(x, y) {
      this.array[x][y] = !this.array[x][y];
    }
  }
}

Vue.createApp(App).mount('#app');

.element {
  width: 40px;
  height: 40px;
  margin: 10px;
  padding: 10px;
  background-color: tomato;
}

.active {
  background-color: lightgreen;
}

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  <table>
    <tr v-for="(row, x) in array">
      <td class="element" v-for="(data, y) in row" @click="toggle(x,y)" :class="data?'active':''"/>
    </tr>
  </table>
</div>

Answer 2

Проблема была в том, что я использовал такую функцию:

matrix: function(size) {
    return new Array(size).fill(new Array(size).fill(false));
}

После того, как изменил на обычный цикл:

matrix: function(size) {
  var arr = [];
  for(var i = 0; i< size; i++) {
    arr.push([]);
    for(var j = 0; j< size; j++) {
      arr[i].push(false);
    }
  }
  return arr;
}

Всё замечательно заработало!

БЛОГ НА HUSL

Меняются все элементы массива JS

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