Vue中使用websocket，leaflet 数据已获取，无更新到页面上

最新推荐文章于 2024-09-18 18:37:58 发布

原创最新推荐文章于 2024-09-18 18:37:58 发布 · 1.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

VUE 同时被 2 个专栏收录

6 篇文章

订阅专栏

leaflet

3 篇文章

订阅专栏

项目因业务需求采用websocket实现后端向前端推送数据，前端能接收并打印数据，但无法更新到页面。此前使用leaflet时也有类似问题，添加点击事件无法使用全局变量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述
在最近项目中，由于业务需求，需要实现后端主动向前端推送数据，最后采用了websocket,但是有个问题，前端接收到了数据，并且能打印显示，但就是更新不到页面上。

原来写法

_this.webSocketColl.onmessage = function(evt) =>{
   	var received_msg = evt.data;
  	this.count = received_msg.coll_online_count
 };

修改为箭头函数

_this.webSocketColl.onmessage = (evt) =>{
    var received_msg = evt.data;
    this.count = received_msg.coll_online_count
};

起始在以前的项目中，使用leaflet时也出现了类似的问题，当时是leaflet添加点击事件无法使用全局变量

原来写法

this.farmDraw.on('contextmenu', function(e) {
    // console.log(farm_info.data.boundary)
    console.log(this.farmObj)
    // console.log(this.farmObj["id"])
});

修改后

this.farmDraw.on('contextmenu', parmeter => {
    // console.log(farm_info.data.boundary)
    console.log(this.farmObj["boundary"])
    console.log(this.farmObj["center"])
    // console.log(this.farmObj["id"])
  });