제품 검색 기능 구현

검색창을 아래 두 곳에 두었다.

• nav에서 검색
• SearchPage에서 검색

 

1. nav 검색 기능

1. nav에 있는 검색창에 keyword 입력(필수)
2. 검색 버튼 클릭 
3. search/keyword로 이동하고 검색 결과 출력

<template>
  <div id="nav">
    <div class="menu-nav">
      <div class="search-form">
        <b-form-input
          size="sm"
          class="mr-sm-2"
          type="text"
          placeholder="검색어를 입력해주세요"
          v-model="keyword"  //keyword에 바인딩
          @keyup.enter="searchresultshow(keyword)" //엔터 클릭시 searchresultshow 실행
        ></b-form-input>
        <b-button
          size="sm"
          class="my-2 my-sm-0"
          type="submit"
          @click="searchresultshow(keyword)" //버튼 클릭시 searchresultshow 실행
        >
          <b-icon icon="search"></b-icon>
        </b-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Nav",
  data() {
    return {
      keyword: ''
    }
  },
  methods: {
    searchresultshow(keyword) {
      if (keyword !== ''){ //검색어를 입력한 경우
        this.$router.push({
          name: "SearchPage",
          params: {
            keyword: this.keyword,
            isResultShow: true,
          },
        });
        this.keyword = ''
        console.log('"',keyword,'"' + ' 검색')
      } else {
        alert('검색어를 입력해주세요!')  //검색어를 입력하지 않은 경우
      }
    },
  }
};
</script>

 

2. SearchPage 검색 기능

1. 검색 페이지에 있는 검색창에 keyword 입력(필수)
2. (검색 버튼 클릭 전) result 화면 숨기기
3. (검색 버튼 클릭 시) search/keyword로 이동하고 검색 결과 출력

2-1) (상위 컴포넌트) SeachPage.vue

<template>
  <div id="searchpage">
    <div id="searchrequire">
      <div class="search-form-title">검색조건</div>
      <div class="search-form-input">
        <b-form-input id="input-default" 
        type="text"
        v-model="keyword"  //keyword에 바인딩
        v-on:input="keywordChanged()"
        v-on:keyup.enter="searchresultshow(keyword)"
        >
        {{keyword}} //nav.vue에서 라우터를 이용해 보낸 파라미터로부터 데이터 받음 
        </b-form-input>
      </div>
      <div class="search-form-button">
        <button @click="searchresultshow(keyword)">
          검색
        </button>
      </div>
    </div>
    <SearchResult v-if="isResultShow" v-bind:keyword="keyword"></SearchResult>  //하위 컴포넌트에 데이터 전달
    <div v-else>
      아직 검색어를 입력하지 않았습니다.
    </div>
  </div>
</template>

<script>
import SearchResult from "@/components/SearchResult.vue";

export default {
  name: "SearchPage",
  components: {
    SearchResult
  },
  data() {
    return {
      isResultShow:true,  //nav.vue에서 라우터를 이용해 보낸 파라미터로부터 데이터 받음 
      keyword: this.$route.params.keyword  //nav.vue에서 라우터를 이용해 보낸 파라미터로부터 데이터 받음 
    }
  },
  methods: {
    searchresultshow(keyword) {
      console.log('"',keyword,'"' + ' 검색')
      if (keyword !== ''){
        this.$router.push({
          name: "SearchPage",
          params: {
            keyword: this.keyword
          },
        }).catch(()=>{});
        this.isResultShow = true
      } else {
        alert('검색어를 입력해주세요!')
      }
    },
    keywordChanged() {
      this.isResultShow = false
    }
  }
};
</script>

 

2-2) (하위 컴포넌트) SearchResult.vue

<template>
  <div id="searchresult">
    <div class="result-title">
      총 {{$store.getters.getFilteredProduct(keyword).length}}개의 상품이 검색되었습니다.
    </div>
    
    <div class="result-items">
      <div
      class="resultitem"
      :key="index"
      v-for="(product, index) in $store.getters.getFilteredProduct(keyword)"
      @click="detailshow(index)"
    >
      <div class="product-img">
        <img v-bind:src="product.productimg" />
      </div>
      <div class="product-info">
        <li class="product-info-title">{{ product.title }}</li>
        <li class="product-info-price">{{ product.price }}원</li>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SearchResult",
  props: [ 'keyword'], //상위 컴포넌트인 SearchPage.vue로부터 데이터 받음
  data() {
    return {
    }
  },
  methods: {}
}
</script>

 

2-3) 검색 결과를 가져오는 getter추가 (store/index.js)

getters: {
    getFilteredProduct:(state) => (keyword) => {
        const filtered = state.products.filter((object) => 
          object.title.toLowerCase().includes(keyword.toLowerCase()) || 
          object.description.toLowerCase().includes(keyword.toLowerCase()
        ));
        if (filtered) return filtered;
    },
},