cineclub-site/front/pages/calendrier.vue

<template>
  <section class="section">
    <header class="is-flex mb-6">
      <h1 class="title is-2 mr-5 mb-0">Calendrier</h1>
      <span class="mr-3">Séances</span>
      <div class="tabs is-toggle is-small">
        <ul>
          <li :class="isPast ? 'is-active' : undefined">
            <a @click="view = 'past'">
              <span>passées</span>
            </a>
          </li>
          <li :class="isPast ? undefined : 'is-active'">
            <a @click="view = 'future'">
              <span>à venir</span>
            </a>
          </li>
        </ul>
      </div>
    </header>
    <KeepAlive>
      <MovieCardListPerMonth v-if="isPast" past />
    </KeepAlive>
    <KeepAlive>
      <MovieCardListPerMonth v-if="!isPast" />
    </KeepAlive>
  </section>
</template>

<script setup lang="ts">
useHead({ title: "Calendrier" })
const router = useRouter()
const route = useRoute()

const view = computed<string>({
  get: () => (route.query?.view as string) || "future",
  set(value) {
    router.replace({ query: { ...route.query, view: value } })
  },
})
const isPast = computed<boolean>(() => view.value === "past")
</script>

<style scoped lang="sass">
header
  align-items: center
</style>