はじめに
完成イメージはこんな感じ
Vueで映画情報の検索がようやくできた。。
— 高卒プログラマーげんと (@gento34165638) October 1, 2020
社会人ってこんなに忙しんや。。。作りたいアプリを作る時間がこんなに無いとは、先が思いやられる。😭#プログラミング #エンジニア pic.twitter.com/GEUoDZ2iMV
Vue 映画情報をTMDb APIを使って取得
一応、上記の続きです。
環境
Vue v2系です。
どうやら2020/09現在、vue v3系ではvuetifyが使えないようなので、あえてv2系にしました。。
https://github.com/vuetifyjs/vuetify-loader/issues/127
使えるようになってら、コメントより教えてください
別に「vuetifyなんて使わない」と言う方は、特にバージョンを気にしなくて良いかと!
vuetifyとaxiosを入れる
コマンドプロンプトかターミナルより、プロジェクトvueの階層へ移動
vue add vuetify
npm install axios
TMDbのAPI keyを取得
【Ionic + Angular】TMDb APIで映画の一覧を取得して表示する
上記リンクのリンクより、取得できます。
検索してみる
APIのドキュメントはこちら
https://developers.themoviedb.org/3/getting-started/search-and-query-for-details
<template>
<v-container text-center>
<v-row>
<v-col>
<h1>検索</h1>
<input
type='text'
v-model='query'
placeholder="検索したい映画を入力"
@keyup='getSearch(query)'
>
</v-col>
</v-row>
<v-row>
<v-col v-for='result in results' :key='result.id'>
<v-card>
<v-img v-bind:src="'http://image.tmdb.org/t/p/w300/' + result.poster_path"></v-img>
<v-card-title>{{ result.title }}</v-card-title>
<v-card-subtitle>{{ result.release_date }}</v-card-subtitle>
<v-card-text>{{ result.overview }}</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
import axios from 'axios'
export default {
name: 'search',
data() {
return {
query: '',
results: '',
// 自分のkeyに置き換える
apiKey: '***',
}
},
methods: {
getSearch(query) {
axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${this.apiKey}&query=${query}`)
.then(response => {
this.results = response.data.results
});
},
}
}
</script>
input
タグで**@keyup
**を使うことで、どうやら非同期っぽい検索をできるようです
参考