Spotify + Vue.jsで気になるアーティストの人気を調べるぞ！ Search画面編

どうもjackです。
前回の続きで今回は検索画面を作成していきましょう

src/components/Search.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

現状からアーティスト名の検索フォームを作成していきましょう！！

src/components/Search.vue

<template>
  <div class="search">
    <input
        placeholder="enter artist name"
        v-model="search_artist_name"
        required>
    <button
      type="button"
      @click="seach_artist">
      search
    </button>
  </div>
</template>

次に入力されたアーティスト名を受け取る処理を書いていきましょう！

src/components/Search.vue

<template>
  <div class="search">
    <input
        placeholder="enter artist name"
        v-model="search_artist_name">
    <button
      type="button"
      @click="seach_artist">
      search
    </button>
  </div>
</template>

<script>
// import axios from 'axios'
export default {
  name:'search',
  data(){
    return {
      search_artist_name: ''
    }
  },
  methods:{
    seach_artist: function(){
      console.log(this.search_artist_name);
    }
  }
}
</script>

これでsearchボタンを押したときにちゃんと名前が受け取れるかコンソールログで見てみましょう！

はーい。
取れてます！！

では受け取った名前をSpotifyに投げましょう！！

vueでのSpotifyの初期準備はこの方の記事を参考にしました！
https://qiita.com/katonux/items/13f4757352b93f92be7d

<template>
  <div class="search">
    <input
        placeholder="enter artist name"
        v-model="search_artist_name">
    <button
      type="button"
      @click="seach_artist">
      search
    </button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name:'search',
  artist_data: [],
  data(){
    return {
      search_artist_name: ''
    }
  },
  methods:{
    seach_artist: function(){
      axios.get("https://api.spotify.com/v1/search",{
        headers:{"Authorization": "Bearer トークンをここに書くよ"},
        params:{"q": this.search_artist_name , "limit": "1", "offset": "0", "type": "artist", "market": "US"}
      }).then(response=>{
        this.artist_data = response.data;
        console.log(this.artist_data);
      }).catch(error => console.log(error))
    }
  }
}
</script>

うん！ちゃんと取れてる！
じゃあ次は取れたデータの表示編で！！