Laravel Vue.js 获取补丁请求后未加载所有数据

Question

我想在活动的所有名额都被占用后动态隐藏“注册”按钮。我还更新了注册用户列表。单击“注册”按钮后，数据已正确保存在后端，但前端仅显示玩家的图片和用户名。刷新页面后，我可以看到用户名和照片。我怎样才能修复我的代码，以便在补丁后显示所有数据？我正在使用 2 个 Vue 组件：

添加播放组件

<template>
    <div>
        <form  v-if="freePlaces == true || freePlaces == 1" @submit.prevent="submit()">  
                <button type="submit" name="participant">Sign up</button>
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            freePlaces: "",
            url: "",
        }
    }, 
    created() {
        this.getUrl();
        this.fetchStatus();
        this.showForm();
    },
    methods: {
        getUrl() {
            let id = window.location.href.split('/').pop();
            this.url = "/events/" + id + "/team" ;
        },
        fetchStatus() {
            let id = window.location.href.split('/').pop();
            axios.get('/events/'+ id + '/availabilty').then((response) => {
                this.freePlaces = response.data;
            })
        },
        showForm() {
            Echo.channel('team-list-count')
            .listen('.players-allowed', (data) => {
                this.freePlaces = data.playersAllowed;
            })
        },
        submit() {
            axios.post(this.url, {
                
                _method: 'patch'
            })
            .then(response => {
                console.log(response.data);
            })
            .catch(e => {
                console.log("Error is");
                console.log(e.data);
            });
        }
    },  
    computed: {
        availabilePlaces() {
            return this.freePlaces;
            return this.url;
        }
    }
}
</script>

和 TeamListComponent

<template>
<div>
    <div v-for="(player, key) in team">
        <img :src="'/storage/' + player.profil_photo" alt="profile picture " >
        <a href="" alt="">{{ player.username }}</a>
    </div>

</div>
</template>
<script>
export default {
    data() {
        return {
            team: [],
        }
    }, 
    created() {
        this.fetchTeam();
        this.AddNewPlayerListener();
        this.DeleteNewPlayerListener();
    },
    methods: {
        fetchTeam() {
                let id = window.location.href.split('/').pop();
                axios.get('/events/'+ id + '/team').then((response) => {
                    this.team = response.data;
                })
        },
        AddNewPlayerListener() {
            Echo.channel('team-list')
                .listen('.updated-team', (data) => {
                  this.team = data.team;
                })
        },
        DeleteNewPlayerListener(){
                Echo.channel('team-list-delete')
                .listen('.updated-team', (data) => {
                this.team = data.team;
            })
        }
    },  
    computed: {
        teamList() {
            return this.team;
        }
    }
}
</script>

控制器包含此功能：

protected function addPlayer($event) {   

    $registered = $event->registered_participants; 
    $registered++;
    $allowed = $event->allowed_participants;
    
    if($allowed <= $registered) {
        $playersAllowed = false;
        event(new ParticipantsCounter($playersAllowed));
        
        if($allowed < $registered) {
            return redirect()->route('event.show', [ 'event' => $event ]);
        }
    }

    $event->registered_participants = $registered;
    $event->save();

    $profile = auth()->user()->profile;
    $profile->participate()->syncWithoutDetaching([$event->id], false);

    $team = $event->participants()->get();

    foreach ($team as $player) {
        $user = User::where('id', $player->user_id)->first();
        $player->username = $user->username;
    }

    event(new NewParticipant($team));

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

补丁请求后的数据：

    { "id": 5, 
"created_at": "2022-04-12T20:35:03.000000Z", 
"updated_at": "2022-04-12T20:35:40.000000Z", 
"user_id": 5, 
"name": "Marlena", 
"familyname": "Test", 
"location": "Amblève", 
"gender": "x", 
"birthdate": "2000-12-12", 
"favorite_sport": "hockey", 
"biography": "Here comes biography", 
"profil_photo": "profiles/kbERb4XrXnu379rtCcyWwb46pOq9UQAtkTKgr42W.jpg" }

刷新页面后的数据：

    { "id": 5, 
    "created_at": "2022-04-12T20:35:03.000000Z", 
    "updated_at": "2022-04-12T20:35:40.000000Z", 
    "user_id": 5, 
    "name": "Marlena", 
    "familyname": "Test", 
    "location": "Amblève", 
    "gender": "x", 
    "birthdate": "2000-12-12", 
    "favorite_sport": "hockey", 
    "biography": "Here comes biography", 
    "profil_photo": "profiles/kbERb4XrXnu379rtCcyWwb46pOq9UQAtkTKgr42W.jpg", 
    "username": "testUser", 
    "pivot": { 
        "event_id": 1, 
        "profile_id": 5, 
        "created_at": "2022-04-25T15:27:37.000000Z", 
        "updated_at": "2022-04-25T15:27:37.000000Z" } 
}

Answer 1

更新： 我通过创建一个空数组解决了这个问题，我在添加用户名后推送每个玩家。

$oldTeam = $event->participants()->get();
$team = [];
foreach ($oldTeam as $player) {
    $user = User::where('id', $player->user_id)->first();
    $player->username = $user->username;
    array_push($team, $player);
}

Laravel Vue.js 获取补丁请求后未加载所有数据

Laravel Vue.js after patch request get doesn't load all the data

laravel

vue.js

patch

pusher

laravel-echo