Search - 버튼 구현하기

@keyup.enter="apply" : 엔터 키를 눌렀을때 apply 함수가 실행되도록 설정

flex-shrink: 0 : 가로넓이가 지정한 값으로 고정되도록 설정

 

omdbapi 사용을 위해서 Usage 부분에 url을 복사한다.

https://www.omdbapi.com/

OMDb API - The Open Movie Database

실제 http 요청을 받을수 있도록 패키지 설치

명령어: npm i axios

async: 비동기 처리

await: 동작을 기다리도록 설정

XHR: XMLHttpRequest의 약어로 웹 브라우저와 웹 서버간에 데이터 전송 API를 의미한다.

따라서 개발자 도구의 네트워크 탭으로 페이지에서 발생하는 데이터 요청은 XHR메뉴로 필터링할 수 있다.

매개변수 확인(XHR 하단에서 확인 가능)

 

Search.vue 코드 수정 (버튼 생성 -> 이벤트 설정(apply) -> 스타일 지정)

<template>
  <div class="container">
    <input
      class="form-control"
      v-model="title"
      type="text" 
      @keyup.enter="apply"
      placeholder="Search for Movies, Series & more" />
  
    <!-- filters 배열 데이터를 반복적으로 가져와서 실행 -->
    <!-- 동적으로 v-model 사용 -->
    <!-- $data["type"] == $data.type -->
    <div class="selects">
      <select
        v-for="filter in filters"
        v-model="$data[filter.name]"
        :key="filter.name"
        class="form-select">
        <!-- v-if 문을 이용하여 year일 경우에만 All Years가 출력 되도록 설정 -->
        <option
          v-if="filter.name == 'year'"
          value="">
          All Years
        </option>
        <option
          v-for="item in filter.items"
          :key="item">
          {{ item }}
        </option>
      </select>
    </div>
    <button
      class="btn btn-primary"
      @click="apply">
      Apply
    </button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      // 초기값 설정
      title: '',
      type: 'movie',
      number: 10,
      year: '',
      filters: [
        {
          name: 'type',
          items: ['movie', 'series', 'episode']
        },
        {
          name: 'number',
          items: [10, 20, 30]
        },
        {
          name: 'year',
          // 즉시실행함수
          // 화살표 함수를 이용하여 년도 데이터를 가져온다. (현재년도 ~ 1985)
          items: (() => {
            const years = []
            // 현재 년도 가져오기
            const thisYear = new Date().getFullYear()
            for (let i = thisYear; i >= 1985; i -= 1){
              years.push(i)
            }
            return years
          })()
        }
      ]
    }
  },
  methods: {
    async apply(){
      const OMDB_API_KEY = '7035c60c'
      // http -> https 로 변경
      const res = await axios.get(`https://www.omdbapi.com/?apikey=${OMDB_API_KEY}&s=${this.title}&type=${this.type}&y=${this.year}&page=1`);
      console.log(res);
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  // 수평 정렬
  display: flex;
  // > *: 자식 전체 선택자
  > * {
    margin-right: 10px;
    font-size: 15px;
    &:last-child {
      margin-right: 0;
    }
  }
  .selects {
    display: flex;
    select {
      width: 120px;
      margin-right: 10px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .btn {
    width: 120px;
    height: 50px;
    font-weight: 700;
    flex-shrink: 0; // 가로넓이가 지정한 값으로 고정되도록 설정
  }
}
</style>

 

브라우저 확인