Vue TMDb APIを使って映画検索

はじめに

完成イメージはこんな感じ

Vueで映画情報の検索がようやくできた。。
社会人ってこんなに忙しんや。。。作りたいアプリを作る時間がこんなに無いとは、先が思いやられる。😭#プログラミング #エンジニア pic.twitter.com/GEUoDZ2iMV

— 高卒プログラマーげんと (@gento34165638) October 1, 2020

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を使うことで、どうやら非同期っぽい検索をできるようです

参考