[Vuetify] v-tabs의 선택 탭을 script로 변경

Vuetify의 v-tabs는 다음과 같이 사용하는 탭 UI 구성 요소입니다.

<template>
  <v-tabs>
    <v-tab>Item One</v-tab>
    <v-tab>Item Two</v-tab>
    <v-tab>Item Three</v-tab>
  </v-tabs>
</template>

(※ 공식에서 인용)

탭을 클릭하면 다음과 같이 선택한 ITEM xxx이 변경됩니다.


이 「어떤 탭이 선택되고 있는지」라는 상태를 script로부터 제어해 보겠습니다.

v-model로 바인딩

먼저 script에서 조작하기위한 전제로 v-model에서 v-tabs를 적절한 변수로 바인딩합니다.

template

  <v-tabs v-model="tab">
    <v-tab>Item One</v-tab>
    <v-tab>Item Two</v-tab>
    <v-tab>Item Three</v-tab>
  </v-tabs>

script(data)

  data() {
    return {
      tab: null,
    }
  },

이제 탭을 전환할 때 변수tab의 움직임을 살펴보겠습니다.@change를 사용하여 v-tabs에 변화가 발생했을 때 tab의 내용을 출력합니다.

  <v-tabs v-model="tab" @change="log">
    <v-tab>Item One</v-tab>
    <v-tab>Item Two</v-tab>
    <v-tab>Item Three</v-tab>
  </v-tabs>

  methods: {
    log() {
      console.log(this.tab)
    },
  },

이 상태에서 탭을 순서대로 누르면…


즉, "v-tabs에서 어떤 탭이 선택되어 있는지"라는 상태는 0부터 순서대로 숫자로 관리되는 것으로 나타났습니다. 이번 예제에서는 0이 "Item One", 1이 "Item Two", 2가 "Item Three"입니다.

스크립트에서 선택한 탭 변경

나머지는 간단하고 방금 바인딩한 변수 'tab'을 업데이트하기만 하면 됩니다.
이번은 created 훅으로 갱신하는 것으로, 초기 표시시부터 선택중의 탭을 제어해 보겠습니다.

  created: function () {
    this.tab = 1
  },

초기 표시시부터 "Item Two"가 선택되어 있습니다.
안전하게 스크립트에서 탭의 선택 상태를 업데이트 할 수있었습니다.