我使用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上：

相關問題