Vue. Почему я не могу изменить элемент массива в Data через мотод?

Question

[hryashik]

Задача какая: клик по элементу должен возвести в квадрат его значение.
Отрисовываем все элементы массива, передаем сам элемент и его индекс. При клике срабатывает функция sqr с переданным аргументом.

<li v-for="(item, index) in items" v-on:click="sqr(index)">
            {{item}}
        </li>

Собственно сам вопрос к методу. Почему он не работает?

sqr: function(index) {
         this.items[index] = Math.pow(this.items[index], 2);
      }

Почему приходится городить через сплайс массива?

sqr: function(index) {
         this.items.splice(index, 1, Math.pow(this.items[index], 2));
      }

Объясните нубу как это работает. Дело в this?

Answer 1

[Samuel_Leonardo]

Документация на 9 языках , выбирайте любой
https://ru.vuejs.org/v2/guide/reactivity.html#%D0%...

Vue не может отследить следующие изменения в массиве:

Прямую установку элемента по индексу: vm.items[indexOfItem] = newValue
Явное изменение длины массива: vm.items.length = newLength
Например:

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // НЕ РЕАКТИВНО
vm.items.length = 2 // НЕ РЕАКТИВНО

Решить первую проблему можно двумя способами, оба дадут эффект аналогичный vm.items[indexOfItem] = newValue, плюс запустят реактивные обновления состояния приложения:

// Использовать Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Использовать Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

Можно использовать метод экземпляра vm.$set, который является псевдонимом для глобального Vue.set:
vm.$set(vm.items, indexOfItem, newValue)
Для решения второй проблемы используйте splice:
vm.items.splice(newLength)

Comments

[hryashik]

Пока просто щупаю, спасибо!

Answer 2

[Алексей Ярков]

Почему приходится городить через сплайс массива?

Потому что надо читать документацию, где написано про этот нюанс.