[Vue.js + vuetify.js] 탭(tab)에서 선택될 탭을 동적으로 처리하여 활성화 하는 방법

떠돌이개발자Nov 3, 2023

vuetify.js에서 제공하는 탭을 사용중에 있다. 탭을 구성하는 기본 태그는 <v-tabs>, <v-tab> 이다. 조건에 따라 페이지가 보여질 때 선택적으로 탭을 변경해야한다. 정상적으로 동작하지 않아 2시간 째 구글링과 삽질중이다. 제대로 동작하지 않는 코드는 다음과 같다.

<template>
  <v-container>
    <v-tabs v-model="selectedTab"
      grow
      background-color="white"
      color="cyan darken-1">
      <v-tab v-for="item in tabs" :key="item.id"
        v-show="item.enable === 'Y'"
        @click="movePage(item.id)">{{item.name}}</v-tab>
    </v-tabs>
    <component :is="currentView" :mainId="data.mainId" :keyId="data.keyId" />
  </v-container>
</template>

<script>
import Info from '@/views/components/test/TestInfo.vue';
import Feedback from '@/views/components/test/Feedback.vue';

export default {
  name: 'TestDetail',
  components: {
    Info,
    Feedback,
  },
  computed: {
  },
  data: () => ({
    currentView: 'Info',
    tabs: [
      { id: 'Info', name: '기본정보', enable: 'Y' },
      { id: 'Feedback', name: '피드백', enable: 'Y' },
    ],
    data: {
      mainId: '',
      keyId: '',    
      selectedTab: 'Info',
    },
  }),
  async created() {
    this.currentView = 'Info';
  },
  mounted() {
    this.data.selectedTab = 'Hist';
  },
  methods: {
    movePage(id) {
      this.currentView = id;
    },
  },
};
</script>

위와 같이 페이지 시작시 mounted() 훅에서 2번째 탭인 Hist를 선택되도록 하였다. 정상적으로 Hist탭에 해당하는 콤포넌트는 호출되었으나, 2번째 탭을 선택했다는 백그라운드 색상 파란줄(?)이 생기지 않아, 어떤 탭이 선택되었는지 알 수 없다.

아래 스니펫은 페이지 시작시 정상적으로 탭 변경이 잘 된다. vuetify.js 버전 문제일까? 아래 스니펫은 vuetify.js 버전이 vuetify”: “1.1.9” 이다.

<template>
  <v-app>
   <v-tabs grow v-model="active_tab">
     <v-tab
      v-for="tab of tabs"
      :key="tab.index"
     >
     {{tab.name}}
     </v-tab>
   </v-tabs>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
      active_tab: 1,
      tabs: [
        { index: 0, name: 'tab1' },
        { index: 1, name: 'tab2' },
        { index: 2, name: 'tab3' }
      ]
    }),
    mounted() {
      this.active_tab = 0;
    }    
  }
</script>

[결과]

혹시 index값으로 탭을 찾아가야 하는 것일까? 문자키로 찾아가는지 여부를 확인하기 위해 테스트를 해보았다. 테스트한 스크립트는 다음과 같다. 원인은 텍스트 키값으로 먹히지 않는다.

<template>
  <v-app>
   <v-tabs grow v-model="active_tab">
     <v-tab
      v-for="tab of tabs"
      :key="tab.index"
     >
     {{tab.name}}
     </v-tab>
   </v-tabs>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
      active_tab: 'hist',
      tabs: [
        { index: 'info', name: 'tab1' },
        { index: 'hist', name: 'tab2' },
        { index: 'tab3', name: 'tab3' }
      ]
    }),
    mounted() {
      this.active_tab = 'info';
    }    
  }
</script>

마운트 훅 부분에서 아래와 같이 인덱스 값으로 적용해보니 정상적으로 탭 지정이 처리되었다.

    mounted() {
      this.active_tab = 2;
    }

해결방법을 드디어 찾았다. active_tab 변수 이름으로 접근해야한다. 커스텀 변수명은 적용할 수 없다. ㅡ,.ㅡ

아니 왜 이런 정보는 가이드 문서에서 찾아볼 수 없는 것인가?

[해결된 코드 정보]

<template>
  <v-container>
    <v-tabs v-model="active_tab"
      grow
      background-color="white"
      color="cyan darken-1">
      <v-tab v-for="item in tabs" :key="item.id"
        v-show="item.enable === 'Y'"
        @click="movePage(item.id)">{{item.name}}</v-tab>
    </v-tabs>
    <component :is="currentView" :mainId="data.mainId" :keyId="data.keyId" />
  </v-container>
</template>

<script>
import Info from '@/views/components/test/TestInfo.vue';
import Feedback from '@/views/components/test/Feedback.vue';

export default {
  name: 'TestDetail',
  components: {
    Info,
    Feedback,
  },
  computed: {
  },
  data: () => ({
    currentView: 'Info',
    tabs: [
      { id: 'Info', name: '기본정보', enable: 'Y' },
      { id: 'Feedback', name: '피드백', enable: 'Y' },
    ],
    data: {
      mainId: '',
      keyId: '',    
      selectedTab: 'Info',
    },
    active_tab: 0,
  }),
  async created() {
    this.currentView = 'Info';
  },
  mounted() {
    this.active_tab = 1;
  },
  methods: {
    movePage(id) {
      this.currentView = id;
    },
  },
};
</script>

삽질의 효과는 상당히 크다. 기억에 오래 남는다. 그러나 개발 일정에 쫒기면 미친다.!!

[REFERENCE]