(라우터 연결 방법은 바로 이전 글 확인!)
components 폴더의 Header 컴포넌트
v-for
를 사용하여 navigation 만들기RouterLink
를 사용해서 링크 걸어주기// TheHeader.vue
<template>
<header>
<RouterLink v-for="nav in navigations">
:key="nav.path"
:to="nav.path"
</RouterLink>
</header>
</template>
<script>
export default {
data() {
return {
navigations: [
{ path: '/', name: 'Home' },
{ path: '/movies/tt4520988', name: 'Movies~' },
{ path: '/about', name: 'About~' },
{ path: '/abc', name: 'ABC' }
]
}
}
}
</script>
a
태그로 변환
// Home.vue
<template>
<h1>Search!</h1>
<input v-model="searchText" @keydown.enter="searchMovies" />
<ul>
<li v-for="movie in movies" :key="movie.imdbID">
<RouterLink :to="`/movies/${movie.imdbID}`">
{{ movie.Title }}
</RouterLink>
</li>
</ul>
</template>
<script>
export default {
data() {
return {
searchText: '',
movies: []
}
},
methods: {
async searchMovies() {
let res = await fetch(`https://www.omdbapi.com?apikey=${API_KEY}=${this.searchText}`)
res = await res.json()
console.log(res)
// 빈배열에 api에서 가져온 search를 할당
this.movies = res.Search
}
}
}
</script>
<template>
<h1>{{ movie.Title }}</h1>>
<div :style="{
backgroundImage: `url(${requestDiffSizePoster(movie.Poster)})`
}" class="poster"></div>
</template>
<!-- 이미지 크기가 다를때 div쓴다 -->
특이사항: 포스터를 출력하기 위해 img태그라고 막연히 생각했는데 api상에서 이미지 크기를 지정해서 불러올 수 있을때(예: 'SX300', 'SX700') img
태그가 아닌 div
태그를 이용하면 유용하다고 한다.
<script>
export default {
data() {
return {
// 하나의 영화의 상세 정보를 가지고있는 데이터를 movie라는 이름으로 만든다.
movie: {}
}
},
created() {
this.searchMovieDetails()
},
methode: {
async searchMovieDetails() {
let res = await fetch(`https://www.omdbapi.com?apikey=${API_KEY}=${this.$route.params.heropy}`)
res = await res.json()
console.log(res)
this.movie = res
},
// 이미지 src 주소를 받아서, replace로 대체한다.
// newSrc는 여기서만 사용하니까 바로 return 가능
// src가 undefined이면 문자데이터로한다(기본값 지정) 아닐 경우 return
requestDiffSizePoster(src = '') {
// if (!src) return
return src.replace('SX300', 'SX700')
}
}
}
</script>