Измените значение данных, но данные не обновляются

Question

Многослойные вложенные данные Vue, такие как:

out:{
   arr:[
        {a:1}
       ]
}

Когда я изменяю значение с помощью this.out.arr[0] = {a:2}, представление не обновляется. Но если мой код this.out.arr[0].a = 2;, представление обновляется.

Вот ссылка !

Вы можете комментировать и раскомментировать код в методе changeA, чтобы увидеть другие результаты!

Answer 1

Я полагаю, что это стандартное предостережение относительно обновления массивов с помощью индексов:

https://vuejs.org/v2/guide/list.html#Caveats

Vue не может обнаружить изменения, внесенные в массив, путем непосредственного присвоения значения индексу.

Итак, вместо этого:

this.out.arr[0] = {a:2}

... вам нужно использовать это:

this.$set(this.out.arr, 0, {a: 2})

Обновление:

Чтобы понять разницу между двумя случаями, упомянутыми в вопросе, это может помочь полностью выписать их.

this.out.arr[0] = {a:2}

// ... is equivalent to ...

const arr = this.out.arr // read
arr[0] = {a: 2}          // write

Принимая во внимание:

this.out.arr[0].a = 2

// ... is equivalent to ...

const obj = this.out.arr[0] // read
obj.a = 2                   // write

В двух приведенных выше примерах я разделил части выражений для чтения и записи. Чтение значений с использованием индекса массива не проблема, просто запись. Первый пример пытается записать свойство 0 arr, которое нарушает предостережение индексов Vue. Второй пример пытается записать в свойство a obj, которое не имеет индекса массива, поэтому не имеет такой проблемы.

Answer 2

Над @skirtle ответ является правильным способом обновления данных VUE! В справочной документации сказано:

Например, когда вы устанавливаете vm.someData = 'new value', компонент не будет повторно визуализироваться немедленно. Он обновится в следующем «тике», когда очередь будет очищена.

Таким образом, установка непосредственно по индексу не приведет к немедленному обновлению dom .... вам нужно выполнить forceUpdate

  this.out.arr[0] = {a:2}; // can not updated
  this.$nextTick(function () {        
    this.$forceUpdate(); // will be update
  });