Pusher无法读取未定义的属性（Reading＆＃x27; push＆＃x27;）

Question

我想用推送器更新用户列表。 当我提交控制台时显示此错误： 在此处输入图像描述

我也会被undwoffick. Pusher.js Cointains for Pusher，它放在页脚中：

   let teamChannel = pusher.subscribe('team-list');
   teamChannel.bind('updated-team', function(data) {
     app.team.push(JSON.stringify(data)); 
   });
    

我的活动：

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class NewParticipant implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $team;
    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($team)
    {
        $this->team = $team;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|arrays
     */
    public function broadcastOn()
    {
        return new Channel('team-list');
    }

    public function broadcastAs() 
    {
        return 'updated-team';
    }
}

来自VUE组件的JS：

<script>

    export default {
        data() {
            return {
                team: [],
            }
        }, 
        created() {
            this.fetchPlayer();
            this.listenForChanges();
        },
        methods: {
            fetchPlayer() {
                console.log('test');
            },
            listenForChanges() {
                window.Echo.channel('team-list')
                    .listen('updated-team', (e) => {
                        console.log("echo is working");
                        console.log("e is " + e);
                        })
            }
        },  
        computed: {
            teamList() {
                return this.team;
            }
        }
    }
    </script>

我的控制器具有此函数：

protected function addPlayer($event, Request $request) {   

    $profile = auth()->user()->profile;
    $profile->participate()->syncWithoutDetaching([$event->id], false);
    $team = $event->participants()->get();    
    event(new NewParticipant($team));

    return redirect()->route('event.show', [ 'event' => $event ]);
}

更新：我将推动器代码移至app.js，但该应用程序仍然不确定：

 const app = new Vue({
    el: '#app',
  });
  
  let body = document.querySelector("body");
  if(body.classList.contains('gruppo-app')) {
    Pusher.logToConsole = true;
  
    var pusher = new Pusher('mykey', {
      cluster: 'myclutes'
    });
  
    let teamChannel = pusher.subscribe('team-list');
    teamChannel.bind('updated-team', function(data) {
    app.team.push(JSON.stringify(data)); 
    });
  }


  

Answer 1

更新：
如果使用Laravel Echo，则不需要与推动器的连接。
我专注于回声，我删除了这个块：

  let body = document.querySelector("body");
  if(body.classList.contains('gruppo-app')) {
    Pusher.logToConsole = true;
  
    var pusher = new Pusher('mykey', {
      cluster: 'myclutes'
    });
  
    let teamChannel = pusher.subscribe('team-list');
    teamChannel.bind('updated-team', function(data) {
    app.team.push(JSON.stringify(data)); 
    });
  }

要正确连接echo dot 。这：

 window.Echo.channel('team-list')
             .listen('.updated-team', (e) => {
                 console.log("echo is working");
                 console.log("e is " + e);
             })

现在推动器正常工作。