Обновление данных в Vue. js

Question

Я пытаюсь обновить сетку данных, созданную с помощью Vue. js, но содержимое обновляется некорректно. Вот мой HTML:

<div class="col-md-10 col-10">
    <div class="row" id="grid">
        <div class="col-md-4" v-for="entry in entries">
            <div class="info_overlay">
                <div>
                    <span class="name">{{ entry.name }}</span>
                    <span class="description">{{ entry.description }}</span>
                </div>
            </div>
        </div>
    </div>
</div>

А теперь мой JS:

var _results = [{name: 'toto', description: "titi" }];
var app = new Vue({
  el: '#grid',
  data: {
    entries: _results
  }
})

socket.on('get_entries', function(data){
    console.log(_results); 
    console.log(data);
    // Both logs show the same result (see below)

    _results[0].description = data[0].description    // This works! The description of the 1st item is updated
    _results = data;                                 // This doesn't work

});

Теперь я не знаю, почему невозможно обновить сразу весь массив. Я заметил в Chrome небольшую разницу между сообщениями журналов, хотя данные те же:

• Первый выглядит так: {…}, ob : Se ] 0: description: (...) name: (...)
• Второй выглядит более естественно: [{…}] 0: description: «Хороший питомец» name: «Test pet»

Есть ли разница между этими двумя?

Answer 1

Как вариант:

var _results = [{name: 'toto', description: "titi" }];
var app = new Vue({
  el: '#grid',
  data: {
    entries: _results
  }
})

socket.on('get_entries', function(data){
    console.log(_results); 
    console.log(data);
    // Both logs show the same result (see below)

    _results[0].description = data[0].description    // This works! The description of the 1st item is updated
    _results.splice(0, data.length, ...data);                                // This doesn't work

});

Answer 2

Я считаю, что есть способ обновить весь array без необходимости делать дополнительные JavaScript, чтобы вызвать реактивность, но использовать то, что Vue может предложить.

Для этого вы может потребоваться поместить socket в created() хук с arrow function, чтобы мы могли использовать this для обновления entries.

Таким образом мы запускаем реактивность для свойства data напрямую.

import io from 'socket.io-client';
var _results = [{name: 'toto', description: "titi" }];
var app = new Vue({
  el: '#grid',
  data: {
    entries: _results,
    socket: io()
  },
  created() { 
   this.socket.on('get_entries', (data) => {  
    this.entries = data;                                 
   });
  }
})

Это работает и в вашем случае?