Vue.js Laravel echo vue js here方法

我对这里的方法vuejs，laravel echo有问题

广播频道

Broadcast::channel('task.*', function ($user, $taskId) {
    $task = Task::find($taskId);
    if ($task)
    {
        return ['id' => $user->id, 'name' => $user->name];
    }
});

叶片模板

<task-show inline-template :task="{{ json_encode($task) }}" :user-id="{{ auth()->user()->id }}" >
                        <ul>
                            <li v-for="viewer in viewersExceptMe">
                                @{{ viewer['name'] }}
                            </li>
                        </ul>
                        <div>
                            <table class="table table-bordered table-hover">
                                <tbody>
                                    <tr>
                                        <td>Task Name</td>
                                        <td>@{{  task['name'] }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </task-show>

@{{viewer['name']}


任务名称
@{{task['name']}

我的剧本

<script>
    export default{
        props : {
            task : Object,
            userId : Number
        },
        data : function () {
          return {
              viewers : []
          }
        },
        ready : function(){
            this.listen();
        },
        computed: {
            viewersExceptMe(){
                return _.reject(this.viewers, viewer => viewer.id == this.userId);
            }
        },
        methods : {
            listen(){
                Echo.join('task.' + this.task.id)
                    .here(viewers => {
                        this.viewers = viewers;
                    });
            }
        }
    }
</script>

导出默认值{
道具：{
任务：对象，
userId:Number
},
数据：函数（）{
返回{
观众：[]
}
},
就绪：函数（）{
这个；
},
计算：{
viewersExceptMe（）{
return u.reject（this.viewers，viewer=>viewer.id==this.userId）；
}
},
方法：{
听{
Echo.join（'task.'+this.task.id）
.here（观众=>{
this.viewers=观众；
});
}
}
}

在下图中，here方法不起作用，当用户离开信息页面时，viewers变量不会更新

加入状态频道 要加入状态频道，可以使用Echo的join方法。join方法将返回一个PresenceChannel实现，该实现与listen方法一起公开，允许您订阅here、join和leaving事件

Echo.join(`chat.${roomId}`)
    .here((users) => {
        //
    })
    .joining((user) => {
        console.log(user.name);
    })
    .leaving((user) => {
        console.log(user.name);
    });

• 一旦通道关闭，这里的回调将立即执行 成功加入
• 当一个新的 用户加入频道
• 当用户 离开英吉利海峡

在你目前的情况下，这个方法应该是这样的

Echo.join('task.' + this.task.id)
                    .here(viewers => {
                            this.viewers = viewers;
                    })
                    .joining((user) => {
                        this.viewers.push(user)
                    })
                    .leaving((user) => {
                        this.viewers = _.reject(this.viewers, viewer => viewer.id == user.id);
                    });

---

参考：，

如果您在

here（）

函数中

console.log（）

查看它们，您是否看到了查看器？是的，仅在第一次或在刷新页面上