탭

<template>
    <v-card>
    <v-tabs
        
      v-model="state.tab"
      background-color="primary" >

      <v-tab value="one" @click="handleClick('one')" @change="handleChange">Item One</v-tab>
      <v-tab value="two" @click="handleClick('two')" @change="handleChange">Item Two</v-tab>
      <v-tab value="three" @click="handleClick('three')" @change="handleChange">Item Three</v-tab>
    </v-tabs>

{{state.tab}}

    <v-card-text>
      <v-window v-model="state.tab">
        <v-window-item value="one">
          One
        </v-window-item>

        <v-window-item value="two">
          Two
        </v-window-item>

        <v-window-item value="three">
          Three
        </v-window-item>
      </v-window>
    </v-card-text>
  </v-card>
</template>

<script>
import { reactive } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core'
export default {
    setup () {
        const state = reactive({
            tab : 'two'
        })
        
        const handleChange = (e) =>{
            console.log('handleChange',e)            
        }

        const handleClick = (e) =>{
            console.log('handleClick',e)    
            sessionStorage.setItem("MENU", e);        
        }

        onMounted(()=>{
            state.tab = sessionStorage.getItem("MENU");
        })

        return {state, handleChange, handleClick}
    }
}
</script>

<style lang="scss" scoped>

</style>