javascript - VueJS: Filter Function only works on reload

Question

When my website loads the array for my select box, it always returns all objects inside the array. It should filter everyone who is registered already but it only works when I press reload after navigating to the view.

I am completly lost, why when I navigate to this page it loads all athletes. When I press F5, the athletes are filtered correctly.

router.js

{
  path: '/events/:id/register/athletes',
  name: 'RegisterAthletes',
  component: () => import(/* webpackChunkName: "registerAthletes" */ '../views/RegisterAthletes.vue'),
  beforeEnter: async (to, from, next) => {
    if (!await isAuthorized()) next({ name: 'Login' });
    if (!await isGymManager()) next({ name: 'Error403' });
    else next();
  },
},

view

<template>
  <select id="athlete" v-model="selectedAthlete" class="form-control">
    <option v-for="a in freeAthletes" :key="a.id" :value="a.id">
      {{ a.account.full_name }}
    </option>
  </select>
</template>

<script>
  methods: {
    freeAthletes() {
      return this.athletes.filter((athlete) => !this.registrations
        .map((reg) => reg.athleteId).includes(athlete.id));
    },
  },
  async mounted() {
    this.session = await this.$getSession();
    const eventId = this.$route.params.id;
    const gymId = this.session.gym_id;
    this.event = await this.$getEvent(eventId);
    this.gym = await this.$http.get(`gyms/${gymId}`).then((response) => response.data);
    this.athletes = await this.$getUnregisteredAthletes(eventId, gymId);
  }
</script>

function

Vue.prototype.$getUnregisteredAthletes = async function (eventId, gymId) {
  const allAthletes = await this.$http.get(`athletes?filter[gym_id]=${gymId}&expand=registrations`)
    .then((response) => response.data)
    .catch((error) => this.$log(error));
  return allAthletes.filter((athlete) => !athlete.registrations
    .map((reg) => String(reg.event_id)).includes(eventId));
};

question from:https://stackoverflow.com/questions/65641046/vuejs-filter-function-only-works-on-reload

Answer 1

Waitting for answers