Laravel echo 不能使用动态 id答案

【问题标题】：Laravel echo not working with dynamically idLaravel echo 不能使用动态 id
【发布时间】：2018-09-04 08:17:06
【问题描述】：

我使用 pusher ，Laravel echo 和 vue.js 来像图片一样聊天
the chat app

这里是 vue.js 代码

var myChat = new Vue({
  el: '#myChat',
  data: { 
      the_chat: '', 
      current_user_id: 1,  
  },
  mounted(){
      this.set_user_id();
       window.Echo.channel( 'the_chat.'+this.current_user_id ) 
          .listen('SendMessage' ,(e) => {
            myChat.the_chat.push(e.chat);
            console.log('the_chat.'+this.current_user_id +'  -----');
      });
  },
  methods:{
     choose_user:function(user_id,model){
          $.get(api_get_chat+'/'+user_id,function(response){
              myChat.the_chat = response; 
              myChat.current_user_id = user_id; 
              console.log( myChat.echo_the_chat_id );
          });
      }
}

首先当current_user_id = 1 它只回显频道the_chat.1 但是当 current_user_id 更改为 2 时，它仍然只回显到频道 the_chat.1 和 console.log

the_chat.2 ----

由于

console.log('the_chat.'+this.current_user_id +'  -----');

【问题讨论】：

标签： laravel vue.js echo pusher laravel-echo

【解决方案1】：

我认为这个问题比你想象的更难。

第一：当你挂载组件时，这段代码会运行window.Echo.channel()，但只运行一次。当您更改 Id 变量时，此代码不会再次注册频道监听。

第二： 控制台写入修改后的 ID 变量，因为日志写入器使用引用的变量，改变了什么。（希望你能理解。:)）

解决方案：您应该将ID变量更改逻辑移至父组件，并在每个ID更改事件时重新渲染/重新安装该组件。（或者丑陋的方法：你应该在 id 上创建一个 watch 方法，每当它改变时，重新注册频道监听。但是自我重新挂载不是一个好方法..）

希望对你有帮助！ :)

【讨论】：