私人频道适用于静态 ID 但不适用于动态 vue.js

Question

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

这是我的 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
       });
    });
});

私人频道适用于静态 ID 但不适用于动态 vue.js

Private channel works with static id but not dynamic vue.js

pusher

vue.js