在 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: "A nice pet" 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 functionthisentries

这样我们就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;                                 

   });

  }

})

这也适用于您的情况吗？