私有频道使用静态ID而不是动态vue.js

Question

在私人频道上，当我对ID进行硬编码时，它工作正常并且我正在接收消息，但是当将值设置为动态时，它将无效。

这是我的app.js代码

const livechat = new Vue({
   el: '#livechat',
   data: {
     conversation: [],
   },
   methods: {
     addMessage(message) {
       // Add to existing messages
       // this.conversation.messages.push(message);

       // Persist to the database etc
       axios.post('/messages', message).then(response => {
         this.conversation.messages.push(response.data);
       })
     }        
   },
   created() {
     axios.get('/messages/' + user_id).then(response => {
       this.conversation = response.data;
     });

     Echo.private('chat.' + this.conversation.conversation_id)
         .listen('MessageSent', (e) => {
           this.conversation.messages.push({
             conversation_id: e.message.conversation_id,
             message: e.message.message,
             name: e.user.firstname
           });
        });
   }
});

在控制台日志中我接收 conversation_id = 22

Echo.private('chat.22') //This works fine
Echo.private('chat.' + this.conversation.conversation_id) //This won't working

广播文件

public function broadcastOn()
{
    return new PrivateChannel('chat.' . (int)$this->message->conversation_id);
}

我的代码有什么问题。我们将不胜感激。感谢

Answer 1

Echo.private调用只有在您拥有所有数据时才能进行 - 换言之，在axios.get().then(...)内：

axios.get('/messages/' + user_id).then(response => {
   this.conversation = response.data;
   Echo.private('chat.' + this.conversation.conversation_id)
       .listen('MessageSent', (e) => {
         this.conversation.messages.push({
           conversation_id: e.message.conversation_id,
           message: e.message.message,
           name: e.user.firstname
       });
    });
});