Javascript Laravel Redis使用vue显示sock数据

我用laravel构建了一个简单的事件类，如果有人发出通知，我就会触发该类。事件类如下所示：

class InquirySent extends Event implements ShouldBroadcast
{
    use SerializesModels;

    public $inquiries;

    public function __construct($inquiries)
    {
        $this->inquiries = $inquiries;
    }
    public function broadcastOn()
    {
        return ['inquiry-sent-channel'];
    }
}

    # fire inquiry notification event
    event(new InquirySent(
        $user->notifications()->where('type', InvoiceInquiry::class)->count()
    ));

var socket = io('http://192.168.3.115:3000');

new Vue({

    el: '#app',

   data: {
       inquiries: [],
   },

   ready: function() {
       // InquirySent event
       socket.on('inquiry-sent-channel:App\\Events\\InquirySent', function(data) {
           console.log(data);
           this.inquiries.push(data);
       }.bind(this));
   }

});

我触发事件（创建一个新实例），如下所示：

class InquirySent extends Event implements ShouldBroadcast
{
    use SerializesModels;

    public $inquiries;

    public function __construct($inquiries)
    {
        $this->inquiries = $inquiries;
    }
    public function broadcastOn()
    {
        return ['inquiry-sent-channel'];
    }
}

    # fire inquiry notification event
    event(new InquirySent(
        $user->notifications()->where('type', InvoiceInquiry::class)->count()
    ));

var socket = io('http://192.168.3.115:3000');

new Vue({

    el: '#app',

   data: {
       inquiries: [],
   },

   ready: function() {
       // InquirySent event
       socket.on('inquiry-sent-channel:App\\Events\\InquirySent', function(data) {
           console.log(data);
           this.inquiries.push(data);
       }.bind(this));
   }

});

我使用以下脚本设置节点服务器：

var server = require('http').Server();

var io = require('socket.io')(server);

// class declaration
var Redis = require('ioredis');

/**
 * Redis UserSignedUp Channel
 */
var redisSignedUp = new Redis();

redisSignedUp.subscribe('signed-up-channel');

/**
 * Redis InquirySent Channel
 */
var redisInquirySent = new Redis();

redisInquirySent.subscribe('inquiry-sent-channel');

redisInquirySent.on('message', function(channel, message) {
    message = JSON.parse(message);
    console.log(message.data.inquiries);
    io.emit(channel + ':' + message.event, message.data.inquiries);
});

// run server on port X
server.listen(3000);

在我的event.js中，我将其绑定如下：

class InquirySent extends Event implements ShouldBroadcast
{
    use SerializesModels;

    public $inquiries;

    public function __construct($inquiries)
    {
        $this->inquiries = $inquiries;
    }
    public function broadcastOn()
    {
        return ['inquiry-sent-channel'];
    }
}

    # fire inquiry notification event
    event(new InquirySent(
        $user->notifications()->where('type', InvoiceInquiry::class)->count()
    ));

var socket = io('http://192.168.3.115:3000');

new Vue({

    el: '#app',

   data: {
       inquiries: [],
   },

   ready: function() {
       // InquirySent event
       socket.on('inquiry-sent-channel:App\\Events\\InquirySent', function(data) {
           console.log(data);
           this.inquiries.push(data);
       }.bind(this));
   }

});

控制台（命令行）在我的情况下返回正确的值：69

但是，如果我尝试使用vue.js将其放在我的视图中，它不会显示任何内容，也不会在浏览器控制台中出现任何错误：

<li v-for="inquiry in inquiries">@{{ inquiry }}</li>

@{inquiry}