[Vue.js] 영화 검색 사이트 예제 - 07. Search_버튼

참조) OMDb API - The Open Movie Database

OMDb API - The Open Movie Database

홈페이지를 참조하면 다음과 같은 Usage를 확인할 수 있다.

http 요청을 해야하므로 axios 패키지를 설치한다.

npm i axios

버튼 요소 생성

Search.vue의 Template에 검색버튼을 생성한다.

apply 메소드 생성하기

검색 요청이 있을 때마다 비동기식으로 요청을 해야하므로 async를 사용한다.

이렇게 하면 다음과 같은 결과가 나온다.

CSS 작성

검색 버튼이 찌그러드는 것을 방지하기 위해 다음과 같이 flex-shirnk 값을 0으로 설정한다.