Vue.js显示Pusher数据Laravel 5.4

Question

我正在使用vue.js，pusher和laravel构建实时聊天应用程序。 我可以从Pusher收到信息。 我可以将json输出到控制台，并且它具有正确的信息。 我只是不确定如何使用fetchMessages获取数据库中已经存在的消息，并附加接收到的新Pusher消息并实时显示它们。

显示讯息

<div id="app">
    <article v-for="message in messages">
        <h3> User ID: @{{ message.user_id }}</h3>
        <p> @{{message.body}} </p>
    </article>
</div>

Vue公司

new Vue({
el: '#app',

data: {
    messages: []
},

ready: function() {
    this.fetchMessages();

    var pusher = new Pusher('key_here', {
        encrypted: true
    });

    var channel = pusher.subscribe('cars');
    channel.bind('App\\Events\\UserHasNewMessage', function(data) {
        console.log(data);
        /*
             I can output my pusher data to the console just fine. 
             But how can I append this data to the existing messages?
        */
    });
},

methods: {
    fetchMessages: function() {
        this.$http.get('/api/messages', function(messages){
            this.$set('messages', messages);
        });
    }
}
})

Answer 1

您可以通过三种方式执行此操作：

在ES5上：

1. 在函数末尾添加.bind(this) ，以便能够在函数内部访问this

    channel.bind('App\\\\Events\\\\UserHasNewMessage', function(data) { this.messages.push(data); }.bind(this)); 

2. this分配给变量，然后在函数中使用该变量

    var that = this; channel.bind('App\\\\Events\\\\UserHasNewMessage', function(data) { that.messages.push(data); }.bind(this)); 

在ES6上：

3. 使用粗箭头 ，因此您可以在函数内部使用this

    channel.bind('App\\\\Events\\\\UserHasNewMessage', (data) => { this.messages.push(data); });