将 socket.io 数据传递给 vuejs

Posted 2023-02-22

【中文标题】将 socket.io 数据传递给 vuejs

【英文标题】：Passing socket.io data to vuejs

【发布时间】：2017-08-31 03:59:18

【问题描述】：

我在 元素时遇到问题。我浏览了几次 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 吗？

【参考方案1】：

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

让自我=这个； 然后使用 self.items.push

【参考方案2】：

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

【讨论】：

仍然不起作用，但绝对离解决方案更近了一步。现在我确实可以正确呈现 HTML，只是这次我得到了一个带有 item.post_title 、 item.post_excerpt 等的元素。

控制台说什么？你删除了JSON.stringify 吗？

控制台没有显示任何错误，如果这是问题的话。我确实尝试过不使用 JSON.stringify - 它仍然是一样的。

您是否安装了 VueJS 开发工具 Chrome 扩展程序？请检查项目数组是否填充了任何数据......或者如果你愿意，我可以通过 teamviewer 帮助你

我不知道那个扩展，谢谢。安装扩展后，我在控制台中收到一个错误，提示 Vue 找不到目标 HTML 元素，即使它在那里。因此，将 javascript 代码重新定位到 head 标记之外就可以了，并且没有更多的控制台错误，也没有 item.post_title 和 item.post_excerpt 。但是，仍然没有显示数据。在我的 Vue 控制台中，我可以看到传递的数据。