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, useContext, watch, Ref} from '@nuxtjs/composition-api'
  import {$useDirtyForm} from "~/use/form/useDirtyForm";
  import {$useMyProfileUpdater} from "~/use/updater/useMyProfileUpdater";
  import {WatchStopHandle} from "@vue/composition-api";

  export default defineComponent({
    setup() {
      const {store, $dataPersister} = useContext()
      const {markFormAsNotDirty} = $useDirtyForm(store)
      const {updateMyProfile, setHistorical, historical} = $useMyProfileUpdater(store, $dataPersister)

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

      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>