Блог

Когда мой веб-сайт загружает массив для моего поля выбора, он всегда возвращает все объекты внутри массива. Он должен фильтровать всех, кто уже зарегистрирован, но он работает только тогда, когда я нажимаю перезагрузку после перехода к просмотру.

Я совершенно не понимаю, почему, когда я перехожу на эту страницу, она загружает всех спортсменов. Когда я нажимаю клавишу F5, спортсмены фильтруются правильно.

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();
  },
},
 

Вид

 <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>
 

функция

 Vue.prototype.$getUnregisteredAthletes = async function (eventId, gymId) {
  const allAthletes = await this.$http.get(`athletes?filter[gym_id]=${gymId}amp;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));
};