v-bind не обнаруживает изменения содержимого массива (vue js)

Question

Я пытаюсь изменить id изображения после того, как пользователь нажимает кнопку. Первоначально id элемента должно быть B0_h , но после того, как пользователь нажмет кнопку, значение в массиве должно измениться на true. Первоначально все значения массива равны false, но как только значение элемента в массиве становится истинным, значение id должно измениться на B0_v .

Используя инструменты разработчика Vue, я заметил, что значение в массиве меняется, как и ожидалось, однако v-bind не может обнаружить это изменение. С точки зрения v-bind значение B[0] все еще равно false. В результате id по-прежнему B0_h .

Вот мой шаблон:

<template>
    <div>
       <button type="button" id="button0" v-on:click="toggle('B0')"></button>
       <img src="../assets/img1.png" alt="A" v-bind:id="[A[0] === true ? 'A0_v' : 'A0_h']" >
       <img src="../assets/img2.png" alt="B" v-bind:id="[B[0] === true ? 'B0_v' : 'B0_h']">
    </div>
</template>

Вот мой сценарий:

<script>
export default {
  name: 'Demo',
  props: {},
  data: function(){
      return{
          A: [false,false,false,false,false,false,false,false,false],
          B: [false,false,false,false,false,false,false,false,false],
          playerTurn: true;
      }
  },
  methods: 
  {
    toggle(x)
    {
      if(x == 'B0' && this.playerTurn)
      {
        this.B[0] = true;
      }
    }
  }
}
</script>

Есть идеи, что я здесь не так делаю?

Answer 1

Это связано с обработкой изменений Vue в массивах и объектах. Vue не будет отслеживать изменения, которые вы делаете. Для этого предлагается специальный метод: set. Он принимает 3 аргумента: массив (или объект), который должен быть изменен, индекс и значение, которое должно быть установлено.

В вашем примере это будет выглядеть так:

Vue.set(this.B, 0, true);

Поставьте эту строку вместо:

this.B[0] = true;

Для получения дополнительной информации, пожалуйста, ознакомьтесь с официальной документацией . Это краткая выдержка:

Vue.set (target, propertyName / index, value) Аргументы:

• {Object |Массив} target
• {string |число} propertyName / index
• {любое} значение

Возвращает: установленное значение.

Использование:

Добавляет свойство к реактивному объекту, гарантируя, что новое свойство также является реактивным, поэтому инициирует просмотр обновлений. Это необходимо использовать для добавления новых свойств в реактивные объекты, поскольку Vue не может обнаружить нормальные добавления свойств (например, this.myObject.newProperty = 'hi').