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

4. 추천 검색어 구현_1

: 번호, 추천 검색어 목록이 탭 아래 위치하도록 해보장~~~

 

 

검색 결과를 searchResult 변수로 받은 것처럼 추천 검색어로 데이터를 받아 올 것이다.

어디서??? 모델에서!!

 

 

그래서 이렇게 data에 keywords 라는 빈 배열의 변수를 만들어 주었다.

 

그러면 이제 이 데이터가 있을 경우와 없을 경우를 따져줘야겠죵

 

그래서 추천 검색어 목록이 있던 div에 또 다시 v-if , v-else로 나누어 분리를 해주었다.

 

그리고 keywords가 있는 경우엔 모델에서 데이터를 가져와야 하기 때문에

 

KeywordModel를 inport 해오고 이는 뷰 인스턴스가 처음 실행이 될 때 가져올 것이기 때문에

created함수에서 this.fetchKeyword라는 함수를 호출하도록 해주었다.

 

 

 

그리고 fetchKeyword함수에서는 KeywordModel에 있는 data를 가져오지!!

data는 추천 검색어 목록의 데이터이므로 이를 keywords에 할당해주는 것이쥐......

 

그러면 keywords.length에 값이 들어가니까 v-if문이 실행될 것이당!!!

 

 

 

우선 v- if문에 JS에서 구현했던 것처럼 ul 태그와 li 태그를 사용하는데, 우선 ul 태그에서 미리 css를 만들어 놓았던 list 클래스를 써주고 li 태그에서는 키워드가 배열이기 때문에 역시나 v-for로 순회하며 접근한다.

 

 

그러면...

 

이렇게 나옴!!! 이때, 인덱스 번호도 같이 출력할 것이기 때문에

 

v-for 를 사용할 때에는 루프를 돌 때 인덱스를 함께 출력할 수 있다.

 

 

그래서 이렇게 두 번째 인자로  index를 써주고

JS에서와 마찬가지로 번호를 출력하는 클래스를 number로 하고 처음엔 0부터 시작이니까 index+1로 해주면

 

이렇게 인덱스 번호와 함께 잘 나온다!!!!!!

 

---

4. 추천 검색어 구현_2

: 목록에서 검색어를 선택하면 선택한 검색어로 화면 이동~~~!

: 검색폼에 추천 검색어까지 설정해보자~~~~

 

 

 

검색어마다 실행이 되어야 하니까 li 태그에 v-on:click을 사용해서 각 검색어마다 클릭을 하면 onClickKeyword함수가 호출되도록 해주었고 해당하는 선택된 검색어를 인자로 넘겨주었다.

 

 

그리고

onClickKeyword 함수에서는 입력한 값을 저장하는 곳이 query였기 때문에 query에 keyword를 할당해주고

search 함수를 호출하면 검색 결과 화면으로 이동하기 때문에 search 함수까지 작성해주면

 

이렇게 검색어를 클릭했을 때, 검색 결과가 잘 구현되는 것을 확인할 수 있다.

 

 

 

 

추천 검색어....구현....끝......