【问题标题】：Vue.js to display Pusher data Laravel 5.4Vue.js 显示 Pusher 数据 Laravel 5.4
【发布时间】：2017-07-19 23:36:36
【问题描述】：

我正在使用 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);
        });
    }
}
})

【问题讨论】：

只需将新消息推送到消息数组
喜欢'this.messages.push(data)'？它说 push 是未定义的。
你不能使用'this'，因为它是一个不同的函数上下文。您需要在函数外给this 起别名，然后使用该别名。
可以将vue实例存入变量const vm = new Vue({...})，然后就可以使用vm.messages.push(data)

标签： javascript vue.js

【解决方案1】：

您有三种方法可以做到这一点：

在 ES5 上：

在函数末尾添加.bind(this)，可以在函数内部访问this

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

将this 分配给一个变量，并在函数中使用该变量

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

在 ES6 上：

使用fat arrow，所以你可以在函数内部使用this

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

【讨论】：