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

5. 최근 검색어 구현_1

: 최근 검색어 목록이 탭 아래 위치! 목록에서 검색어 클릭하면 해당 화면으로 이동!목록에서 검색어를 클릭하면 결과 화면으로 이동!

 

 

이는 추천 검색어에서 구현한 것과 비슷하다.

 

추천 검색어에서는 keywords로 빈 배열을 만들었듯이 최근 검색어에서는 histroy로 빈 배열을 만들었다.

 

 

그리고 최근 검색어 역시 history가 있을 경우와 없을 경우를 나누어서 html을 작성했다.

 

이렇게!!

 

 

그리고 fetchKeyword와 마찬가지로 fetchHistory를 통해 최근 검색어 데이터를 불러왔다.

 

KeywordModel을 import 해오고 함수 구현도 동일하게 작성해주었다.

 

이러면 v-if 문을 작성할 수 있게 되었기 때문에 이 역시도 동일하게

이렇게 작성해주었다.

 

 

그러면

 

헤헤 잘 나온당....

 

 

검색어를 클릭하면 검색 결과 화면으로 이동하는 방법도 추천 검색어와 유사하다.

 

 

onClickHistory를 사용해도 되지만 사실상 추천 검색어의 onClickKeyword 함수와 기능이 동일하기 때문에 그냥 같이 사용하게 썼다...

 

 

그러면 

 

 

이렇게 잘 나옴ㅎㅎㅎ

 

 

---

5. 최근 검색어 구현_2

: 검색 일자와 버튼 목록 구현

 

 

 

사실 이 부분은 JS에서와 유사하게... 간단하게 써주면 된당!!

 

그러면

 

ㅎㅎ 이렇게 잘 나옴!!

 

---

5. 최근 검색어 구현_3

: 목록에서 x 버튼 클릭하면 선택된 검색어가 목록에서 삭제되도록! 검색하면 검색 기록에 추가되도록!

 

 

 

x 버튼에 v-on 디렉티브를 이용해서 click 이벤트를 리슨하고 onClickRemoveHistory라는 함수를 바인딩하면 된다!!

그리고 실제 데이터를 주는 곳은 Model 이니까 HistoryModel의 remove 메소드를 사용하면 되겠지!!

 

호호

 

이렇게 구현을 해보면....

 

 

x버튼에 onClickRemoveHistory 함수를 바인딩 해주고 인자로 해당 keyword를 넘겨주었다. 그러면 x버튼을 클릭할 때마다 이 함수가 실행되겠지!!

 

그리고 onClickRemoveHistory는 이렇게 히스토리 모델에 이미 구현되어 있는 remove 메소드를 이용해서 검색 기록을 삭제하고 다시 히스토리를 fetch!!

 

 

그 런 데

 

이렇게 하고 검색 기록을 삭제하면 삭제는 되지만 바로 다시 검색 화면으로 바뀐다.. 이게 데이터가 계속 버블링 되면서 전파되기 때문이다. JS에서도 이런 문제가 있었다.

 

따라서 이벤트 전파를 막기 위해 JS에서는 e.stoppropagation을 사용했지만

뷰에서는 아주 간단하게

 

 

이렇게 click 뒤에 .stop을 작성하면 버블링을 막을 수 있다.

 

 

 

쫘잔~~ 그러면 잘 삭제가 되고 화면도 그대로 유지!!!

 

 

 

 

이제 검색을 하면 최근 검색어 목록에 추가되도록 구현할 것이다.

검색을 하면 search 함수가 매번 호출되는 것을 확인할 수 있다. 따라서 여기에 검색 히스토리를 추가하면 된다.

데이터를 추가하는 것도 모델이 담당한다.

 

 

그래서 이렇게 히스토리 모델에 작성한 검색어를 추가해주고 다시 fetch시킨다!!

 

 

 

헤헤 그럼 이렇게 새롭게 검색한 명수옹이 최근 검색어로 잘 들어가 있다!

 

 

이렇게 해서 최근 검색어까지 구현 끝~!~!~!~!~!