Question

我有一个将socket.io数据传递给vuejs元素的问题。我几次通过Vue文档，但我无法找到解决方案。基本上，我有一个数据通过socket.io和console.log发送到客户端完美打印。现在我想使用Vue来渲染带有该数据的html元素，但是我将socket.io数据传递给它时遇到了问题。

在Vue文档中，有一个例子说明如何使用静态数据输入。

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>

然而，Vue似乎没有渲染任何东西。在我的控制台中，当我在 st 上执行console.log时，我得到输出：

{"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"}]}

那么任何想法如何正确地将这些数据传递给VueJS？

Answer 1

您应该将套接字连接放入生命周期挂钩之一 - 对于您的情况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))
        }

    })

注意：如果使用箭头语法，则不必绑定this

mounted: function() {
   socket.on('posts', datasocket => {
     this.items.push(datasocket.content)
   })
}

顺便说一下：我认为你不需要使用JSON.stringify

Answer 2

以防万一其他人陷入同一问题，这里的“ this”关键字指的是Socket函数的父级。因此，在声明套接字侦听器之前，请将其存储在其他变量中。

让self = this; 然后使用self.items.push

将socket.io数据传递给vuejs

2 个答案: