我使用vue.js，推杆和laravel来构建一个实时聊天应用程序。我可以很好地从Pusher收到信息;我可以输出JSON到控制台，它有正确的信息。我只是不确定如何使用fetchMessages抓取已存在的数据库中的消息，并追加收到的新Pusher消息并实时显示它们。Vue.js显示推杆数据Laravel 5.4

显示消息

<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); 
     }); 
    } 
} 
})

来源

2017-02-28 fdsa

内只需按下到消息阵列 –

像“this.messages.push（数据）”的新消息？它说推送是不确定的。 – fdsa

你不能使用'this'，因为它是一个不同的函数上下文。您需要在函数外部别名'this'，然后使用该别名。 –

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

在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); 
});

来源

2017-03-18 11:50:51 jcsoriano

Vue.js显示推杆数据Laravel 5.4

回答

在ES5：

在ES6上：

相关问题