섹션 10 탭 실습 관련 질문입니다.

Question

안녕하세요 강의 잘 보고 있습니다. 탭 구현 강의에서 질문이 있습니다.

처음에 created() 훅에서 this.selectedTab을 초기화 해놓고 이벤트를 바인딩 하니 li의 클래스가 변화가 없었는데요,

data에서 selectedTab을 초기화 하고 나서는 li의 클래스가 변화(active)가 있었는데, 이 차이가 궁금합니다.

Answer

data에 선언하지 않고 created() 훅에서만 this.selectedTab을 초기화면 잘 동작하지 않죠? 이런 값을 템플릿에서 사용하면 값을 변경하더라도 뷰js가 변경된 값을 인지하지 못해서 그렇습니다.

뷰 인스턴스의 data 값을 템플릿과 바인딩하려면 반드시 data 객체에 먼저 선언한 뒤 사용해야 되네요.