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 } from '@nuxtjs/composition-api'
import { $useForm } from '~/composables/form/useForm'
import { useMyProfile } from '~/composables/data/useMyProfile'

export default defineComponent({
  setup () {
    const { markFormAsNotDirty } = $useForm()
    const { updateMyProfile, setHistorical, historical } = useMyProfile()

    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)
      markFormAsNotDirty()
      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>