Vue.js没有收到mqtt响应消息

问题描述

我真的是Vue的新手，为此项目我试图将默认值传递给Vue data return()。当前它打印出console.log('INSIDE CLIENT ON MESSAGE")。但是定义为this.room1status = 1的值不会传递或更新为data return room1status。一旦将值1放入room1status内，我是否可以将值1传递给client.on('message',function (topic,message) ？

脚本

  data(){
    return{
      room1status: ''
      }
   },mounted: function(){
    var mqtt = require('mqtt')
    var client  = mqtt.connect('ws://myUrl/')

    client.on('connect',function () {
      client.subscribe('route_status',function (err) {
        if (!err) {
          client.publish('presence','Hello mqtt')
        }
      })
    })

    client.on('message',message) {

      var filterData = message;
      var x = JSON.parse(filterData);
      console.log('INSIDE CLIENT ON MESSAGE"); /** prints this out succesfully **/
      this.room1status = 1; /** but this does not get passed or updated to data return room1status **/
    }
 }

解决方法

this函数回调中的

on不引用组件实例，因此在调用该回调然后使用它之前，应将this分配给变量vm在里面：

  var vm=this;
  client.on('message',function (topic,message) {

      var filterData = message;
      var x = JSON.parse(filterData);
      console.log('INSIDE CLIENT ON MESSAGE"); 
      vm.room1status = 1; 
    }