쇼핑몰 검색 페이지 구현_Vue.js_4

3. 탭 구현_1

: 추천 검색어, 최근 검색어 탭이 검색 폼 아래 위치! 기본적으로 추천 검색어!

 

 

추천 검색어와 최근 검색어라는 데이터를

이렇게 tabs 라는 변수에 배열로 넣어주었고 html로 돌아와

 

v-if 에 submitted를 div로 만들어줬었기 때문에 검색 결과 창이 아닌 경우 v-else에

이렇게 JS에서도 ul태그의 tabs의 class를 tabs로 해줬으니까... 맞춰주고

li 태그를 반복문으로 돌기 때문에 역시 v-for 사용! 그리고 출력할 탭들을 {{tab}}으로 작성해주면 추천 검색어와 최근 검색어가 차례로 출력이 된다....

이렇게!!

 

그런데

출력될 탭을 {{tabs}}로 s를 붙여주면

이렇게 변수였던 tabs가 두 번 나오게 되는 것을 확인할 수 있다....

s의 영향력이 크군.......흠....

 

 

 

그리고 기본적으로 추천 검색어를 클릭한 상태로 만드려면 JS에서 처럼 li 태그에 class 명이 active인 것을 추가해주면 된다..! 기억이 안 나면 다시 보고 오기....ㅎㅎ

 

 

 

이렇게 v-bind에 class 명을 바인딩 할 수 있다...호호

이때 class 명에 조건을 줄 수 있는데 설정한 클래스 명인 active를 먼저 작성해주고 그 active는 tab이 selectedTab과 동일한 경우에 작동하도록.. 조건을 걸어주었다!!!! 신기...

 

 

자 이제 다시 app.js로 돌아와서 selectedTab을 정의해줘야 한다.

이렇게 데이터에 단순하게 '추천 검색어'라고 추가해줘도 되지만.. 이러면 코드가 중복되므로...

 

(이런게 코딩에서 참 중요한 것 같다.... 중복을 제거해주고.. 어쩌귱.....ㅠㅠ)

 

 

데이터에서 selectedTab을 빈 문자열로 바꿔주고

이렇게 만들어줬다!!!

created() 함수는 뷰 인스턴스가 생성될 때 호출되는 함수라고 한돠...!!

 

여기서 selectedTab을 tabs 배열의 0번째로 해주면 추천 검색어로 selectedTab이 값을 가지게 되겠주~~

 

 

 

 

쫘잔 이렇게 잘 됐다호호호호호호

 

 

---

3. 탭 구현_2

: 각 탭을 클릭하면 탭 아래 내용이 변경되도록!

 

 

먼저 탭을 클릭할 때 동작이 되도록 클릭 이벤트를 바인딩 해줘야 한다.

즉, html에서 li 태그에 v-on 디렉티브를 이용해서 클릭 이벤트를 바인딩 해줘야 한다는 것!!!!

 

이렇게 v-on 디렉티브에 click 이벤트를 바인딩 해주고 onClickTab 함수에 tab 네임을 전달해주었다.

 

 

onClickTab 함수에서는 인자로 tab 네임을 받고 selectedTab을 선택된 그 탭으로 설정해주었다.

 

 

그러면

이렇게 추천 검색어와 최근 검색어 탭이 자유롭게 이동된다.

 

 

 

 

이제 탭이 변경될 때마다 아래 뷰를 그려주면 된다.

 

html로 돌아와 탭 목록을 구현했던 ul 태그 아래에 v-if 와 v-else를 이용해서 selectedTab이 tas[0]인 경우 즉, 추천 검색어 목록인 경우와 v-else인 최근 검색어 목록을 이렇게....... 구현했다.

 

그러면

 

이렇게!

이렇게!!!!

 

 

잘 구현되는 것을 확인할 수 있다.

 

 

탭 구현 끝...!!!!