将 socket.io 数据传递给 vuejs [英] Passing socket.io data to vuejs
问题描述
我在将 socket.io 数据传递给 vuejs 元素时遇到问题.我浏览了几次 Vue 文档,但找不到解决方案.基本上,我有一个通过 socket.io 发送到客户端的数据,console.log 完美地打印了它.现在我想使用 Vue 来渲染带有该数据的 html 元素,但是我在将 socket.io 数据传递给它时遇到了问题.
在 Vue 文档中有一个示例,说明如何使用静态数据输入进行操作.
var example1 = new Vue({el: '#example-1',数据: {项目: [{消息:'Foo'},{消息:'酒吧'}]}})
所以我发现我需要将我的数据对象转换为字符串.我为此使用了 JSON.stringify().
var socket = io.connect('http://192.168.1.10');socket.on('posts', 函数 (datasocket) {var st = JSON.stringify(datasocket);var blogposts = new Vue({el: '#blogpost',数据: {物品:st}})});
和 HTML
<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">去某处</a>
然而,Vue 似乎没有渲染任何东西.在我的控制台中,当我在 st 上执行 console.log 时,我得到输出:
{"content":[{"post_title":"帖子标题 1","post_excerpt":"帖子摘录 1","post_link":"/post/1"},{"post_title":"帖子标题 2","post_excerpt":"帖子摘录 2","post_link":"/post/2"},{"post_title":"帖子标题 3","post_excerpt":"帖子摘录 2","post_link":"/post/3"}]}
那么知道如何正确地将这些数据传递给 VueJS 吗?
您应该将套接字连接放入生命周期钩子之一 - 对于您的情况 mounted()
应该可以工作.
var socket = io.connect('http://192.168.1.10');var blogposts = new Vue({el: '#blogpost',数据: {项目: []},安装:功能(){socket.on('posts', function(datasocket) {this.items.push(datasocket.content)}.bind(this))}})
注意:如果使用箭头语法,则不必绑定this
挂载:function() {socket.on('posts', datasocket => {this.items.push(datasocket.content)})}
顺便说一句:我认为你不需要使用 JSON.stringify
I have an issue with passing socket.io data to vuejs element. I went through Vue documentation few times and I couldn't find solution for this. Basically, I have a data that's being sent to client via socket.io and console.log prints it perfectly. Now I wanted to use Vue to render html elements with that data, however I have an issue with passing my socket.io data to it.
In Vue documentation there's an example how to do it with static data input.
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
So I figured out that I need to convert my data object to string for this. I used JSON.stringify() for this.
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
}
})
});
And 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>
However, Vue doesn't seem to render anything. In my console when I do console.log on st, I get output:
{"content":[{"post_title":"Post title 1","post_excerpt":"Post excerpt 1","post_link":"/post/1"},{"post_title":"Post title 2","post_excerpt":"Post excerpt 2","post_link":"/post/2"},{"post_title":"Post title 3","post_excerpt":"Post excerpt 2","post_link":"/post/3"}]}
So any idea how to correctly pass this data to VueJS?
You should put your socket connection into one of the lifecycle hook - for your case mounted()
should work.
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))
}
})
Note: If you use arrow syntax, then you don't have to bind this
mounted: function() {
socket.on('posts', datasocket => {
this.items.push(datasocket.content)
})
}
Btw: I don't think you need to use JSON.stringify
这篇关于将 socket.io 数据传递给 vuejs的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!