app_vue2/components/Layout/SubHeader/DataTiming.vue

<template>
  <main class="d-flex align-baseline">
    <span class="mr-2 ot_dark_grey--text font-weight-bold">{{ $t('display_data') }} : </span>

    <v-btn-toggle
      v-model="historicalBtn"
      dense
      class="ot_light_grey toggle-btn"
      active-class="ot_green ot_white--text"
      multiple
    >
      <v-btn max-height="25" class="font-weight-normal text-caption">
        {{ $t('past') }}
      </v-btn>

      <v-btn max-height="25" class="font-weight-normal text-caption">
        {{ $t('present') }}
      </v-btn>

      <v-btn max-height="25" class="font-weight-normal text-caption">
        {{ $t('future') }}
      </v-btn>
    </v-btn-toggle>
  </main>
</template>

<script lang="ts">
import {defineComponent, onUnmounted, ref, watch, Ref, WatchStopHandle, useContext} from '@nuxtjs/composition-api'
import {useForm} from "~/composables/form/useForm";
import { useMyProfile } from '~/composables/data/useMyProfile'

export default defineComponent({
  setup () {
    const { store, $dataPersister } = useContext()
    const { markAsNotDirty } = useForm(store)
    const { updateMyProfile, setHistorical, historical } = useMyProfile($dataPersister, store)

    const historicalBtn: Ref<Array<number>> = initHistoricalBtn(historical.value as Array<any>)

    const unwatch: WatchStopHandle = watch(historicalBtn, async (newValue) => {
      const historicalChoice: Array<string> = initHistoricalChoice(newValue)

      setHistorical(historicalChoice)
      markAsNotDirty()
      await updateMyProfile()
      window.location.reload()
    })

    onUnmounted(() => {
      unwatch()
    })

    return {
      historicalBtn
    }
  }
})

/**
   * Prépare le tableau de valeur numéraire devant être passé au component v-btn-toggle
   * @param historical
   */
function initHistoricalBtn (historical: Array<any>) {
  const timeChoice:Ref<Array<number>> = ref(Array<number>())
  const historicalArray:Array<any> = ['past', 'present', 'future']

  for (const key in historicalArray) {
    if (historical[historicalArray[key]]) { timeChoice.value.push(parseInt(key)) }
  }
  return timeChoice
}

/**
   * Transforme le résultat renvoyé par le component v-btn-toggle pour l'enregistrer coté AccessProfile
   * @param historical
   */
function initHistoricalChoice (historical:Array<any>) {
  const historicalArray:Array<any> = ['past', 'present', 'future']

  const historicalChoice:Array<string> = []
  for (const key in historical) {
    historicalChoice.push(historicalArray[historical[key]])
  }
  return historicalChoice
}
</script>

<style scoped lang="scss">
  .toggle-btn{
    z-index: 1;
    border-radius: 4px 0px 0px 4px;
  }
</style>