html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
<script type="module" defer src="./main.js"></script>
</head>
<body>
<div id="app">
<input v-model="title" v-on:keydown.enter="searchMovies(true)"/>
<button v-on:click="searchMovies(true)">Search!</button>
<ul>
<li v-for="movie in movies">
<img v-bind:src="movie.Poster" alt="" height="40">
{{ movie.Title }}
</li>
</ul>
<button v-if="movies.length" v-on:click="searchMovies()">More..</button>
</div>
</body>
</html>
js (main.js)
// 컴포넌트
const App = {
// 반응형 데이터 || 반응성을 가진 데이터
data() {
return {
title:'',
page: 1,
movies: []
}
},
methods: {
async searchMovies(isFirst) {
if (isFirst) {
this.movies = []
this.page = 1
}
let res = await fetch(`https://www.omdbapi.com/?apikey=제공키&s=${this.title}&page=${this.page}`)
res = await res.json()
console.log(res);
const {Search, totalResults} = res // 구조분해할당
this.movies.push(...Search)
this.page +=1
}
}
}
Vue.createApp(App).mount('#app')