[Vue] data 변수 값 변경 감지

data 에 변수 를 하나 넣어준다.

​

data() { return { activeTab : 'a' } },

​

해당 값은 컴포넌트에서 클릭시 변동이 되게 해두었다.

​

 

<a href='#' @click="activeTab = 'b'"> <span>예약목록</span> </a>

 

​

해당 컴포넌트 하단 스크립트 파일 쪽에 watch 를 생성해준다.

 

 

​
<script> 
export default { 
	name: 'Layout', 
    components: { }, 
    props: {}, 
    data() { 
    	return { 
        	activeTab : 'form' 
        } 
    }, 
    computed: {}, 
    watch : { 
    	activeTab(newVal, oldVal){ 
        	console.log(newVal, oldVal) 
    	} 
    }, 
    methods: { 
    }, 
    created() { 
    }, 
    mounted() { 
    }, 
    beforeUnmount() { 
    } 
}
    
</script>

 

그러면 클릭할 때 마다 새로운 값과 과거 값이 출력된다.

​

oldVal 은 안써도 된다.