Search - 필터, 버튼

Search - 필터

src폴더 안에 components폴더를 만들고 Search.vue파일을 만듭니다.

container안에 input창을 우선 만들었습니다.

v-model="title"를 통해 양방향 바인딩합니다. class는 부트스트랩 .form-control를 적용합니다.

script부분에 title를 반환합니다.

 

selects부분에 필터를 만들었습니다.

3개의 select박스였고 반복적으로 나타나서 v-for를 사용했습니다.

양방향 바인딩때문에 v-model를 사용했고, 위에 반복문때문에 값이 바뀔 수 있어서 v-model="$data[filter.name]"으로 자동 완성했습니다.

option에는 연도에만 All Years를 표시하면 됨으로 v-if 조건문 사용했습니다. 기타 부분은 반복문 v-for 사용했고요.

 

script부분 3개 select박스를 각각 type, number, year로 구분했습니다. 기본값들도 movie, 10, 빈칸으로 지정했습니다.

filters배열에 3개 select박스 option에 들어가야할 내용을 적어 놨습니다.

특히 year부분에는 함수를 통해 자동화 작업을 했습니다.

 

style부분에는 input과 select박스들은 flex해야하며 select박스들 내부에도 flex했습니다.

 

Search - 버튼

버튼은 부트스트랩에서 제공하는 btn클래스를 사용해서 만들었습니다.

input창에 내용을 입력 후 enter키를 누르거나 버튼을 직접 click하면 apply메소드를 실행하겠습니다.

 

axios.get(`https://www.omdbapi.com/?apikey=${OMDB_API_KEY}&s=${this.title}&type=${this.type}&y=${this.year}&page=1`)

script부분에는 apply메소드가 작동할 겁니다.

axios는 http에 요청을 날려주는 기능이 있습니다. 요청하는 내용은 JS내부에서 비동기로 동작해야하기 때문에 apply() 앞에 async를 추가하며, axios앞에 await를 추가했습니다.

응답받은 결과는 console에서 확인하도록 작성했습니다.

 

style부분은 너비를 120px를 지정했습니다. 위에 select박스들과 같은 너비지만 시각적으로 짧게 보입니다.

이게 search전체 부분에서 앞에 input창, select박스들이 자리를 많이 차져서 btn는 양보해주는 겁니다.

이거를 방지하기 위해 flex-shrink에 0을 부여했습니다.