[英]Updating data in Vue.js
I'm trying to update a data grid made with Vue.js but the content isn't updating properly.我正在尝试更新使用 Vue.js 制作的数据网格,但内容未正确更新。 Here's my HTML:这是我的 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>
And now this my JS:现在这是我的 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
});
Now I don't know why it's not possible to update the whole array at once.现在我不知道为什么不能一次更新整个数组。 I do notice in Chrome a slight difference between the logs messages although the data is the same:尽管数据相同,但我确实在 Chrome 中注意到日志消息之间存在细微差别:
Is there a difference between these two?这两者有区别吗?
As an option:作为一种选择:
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 });
I believe there is a way to update the entire array
without the need to do additional JavaScript
in order to trigger reactivity but use what Vue
has to offer.我相信有一种方法可以更新整个array
,而无需执行额外的JavaScript
以触发反应性,但使用Vue
提供的功能。
For that, you might need to put socket
into created()
hook with an arrow function
, so we can use this
to update entries
.为此,您可能需要使用arrow function
将socket
放入created()
钩子中,因此我们可以使用this
来更新entries
。
That way we trigger the reactivity on data
property directly.这样我们就可以直接触发对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;
});
}
})
Does that work in your case as well?这也适用于您的情况吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.