[vue.js] tab 메뉴 class active 적용, 클릭 메뉴별 비동기 호출

TAB 클릭시에 비동기로 데이터 호출 방법

<template>
<div>
    <ul>
        <li v-for="(tab, index) in tabs" :key="index" :class="{ 'on': activeTab === index }" @click="changeTab(index)">
            {{ tab }}
        </li>
    </ul>                            
</div>
</template>



export default {
    data(){
          return {
            tabs: ['TAB_1', 'TAB_2', 'TAB_3', 'TAB_4', 'TAB_5', 'TAB_6'],
            activeTab: 0,
            code: 'code_1'
    },
    methods: {
        changeTab(index){
            this.activeTab = index;
            this.getTabData(this.code);
        },
        getTabData(cd) {
        	switch (this.activeTab) {
                    case 0:
                    this.getData(cd); 
                    break;
                case 1:
                    console.log(this.activeTab);
                    break;
                case 2:
                    console.log(this.activeTab);
                    break;
                case 3:
                    console.log(this.activeTab);
                    break;
                case 4:
                    console.log(this.activeTab);
                    break;
                case 5:
                   console.log(this.activeTab);
                    break;
                default:
            },
            getData(){
            	axios.post().then(response => { console.log(response) });
            
            }
        
        }
}

swich로 각 탭에 대한 메소드 적용