Javascript 将socket.io数据传递给vuejs
我在将socket.io数据传递到vuejs元素时遇到问题。我查阅了几次Vue文档,但找不到解决方案。基本上,我有一个通过socket.io发送到客户端的数据,console.log可以完美地打印出来。现在我想使用Vue来呈现包含该数据的html元素,但是我在将socket.io数据传递给它时遇到了一个问题 在Vue文档中,有一个如何使用静态数据输入的示例Javascript 将socket.io数据传递给vuejs,javascript,node.js,socket.io,vue.js,Javascript,Node.js,Socket.io,Vue.js,我在将socket.io数据传递到vuejs元素时遇到问题。我查阅了几次Vue文档,但找不到解决方案。基本上,我有一个通过socket.io发送到客户端的数据,console.log可以完美地打印出来。现在我想使用Vue来呈现包含该数据的html元素,但是我在将socket.io数据传递给它时遇到了一个问题 在Vue文档中,有一个如何使用静态数据输入的示例 var example1 = new Vue({ el: '#example-1', data: { items: [
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
所以我发现我需要将我的数据对象转换成字符串。为此,我使用了JSON.stringify()
var socket = io.connect('http://192.168.1.10');
socket.on('posts', function (datasocket) {
var st = JSON.stringify(datasocket);
var blogposts = new Vue({
el: '#blogpost',
data: {
items: st
}
})
});
和HTML
<div id="blogpost">
<div v-for="item in items" class="card" style="width: 20rem;">
<div class="card-block">
<h4 class="card-title">{{ item.post_title }}</h4>
<p class="card-text">{{ item.post_excerpt }}</p>
<a href="{{ item.post_link }}" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
那么,您知道如何正确地将此数据传递给VueJS吗?您应该将套接字连接放入一个生命周期挂钩中-对于您的情况,
mounted()
应该可以工作
var socket = io.connect('http://192.168.1.10');
var blogposts = new Vue({
el: '#blogpost',
data: {
items: []
},
mounted: function() {
socket.on('posts', function(datasocket) {
this.items.push(datasocket.content)
}.bind(this))
}
})
注意:如果使用箭头语法,则不必绑定此
mounted: function() {
socket.on('posts', datasocket => {
this.items.push(datasocket.content)
})
}
顺便说一句:我认为你不需要使用JSON.stringify,以防其他人遇到同样的问题, 这里的“this”关键字指的是套接字函数的父函数。 因此,在声明套接字侦听器之前,请将其存储在其他变量中 让自我=这个;
然后使用self.items.push仍然不起作用,但肯定离解决方案更近了一步。现在我得到了正确呈现的HTML,只是这次我得到了一个带有{{item.post_title}}、{{{item.post_extract}}等的元素。控制台说什么?您是否删除了
JSON.stringify
?控制台中没有显示任何错误,如果这是问题的话。我也尝试过不使用JSON.stringify-它仍然是一样的。您是否安装了VueJS开发工具Chrome扩展?请检查是否有填充了任何数据的项目数组。。。或者,如果你愿意,我可以帮你解决teamviewerI我不知道那个扩展,谢谢。安装扩展后,我在控制台中遇到一个错误,该错误表示Vue无法找到目标HTML元素,即使它存在。因此,将javascript代码重新定位到head标记之外就成功了,不再有控制台错误,也不再有{{item.post_title}和{{item.post_extract}。但数据仍然没有显示出来。在我的Vue控制台中,我可以看到传递的数据。
mounted: function() {
socket.on('posts', datasocket => {
this.items.push(datasocket.content)
})
}