Spotify + Vue.js 조사에 신경 쓰는 미술가들의 인기!화면 검색

9590 단어 musicSpotifyVue.js
안녕하세요, 저는 잭입니다.
지난번에 이어 이번에는 검색 화면을 만들자
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>
지금 검색 버튼을 눌렀을 때 이름을 잘 받아들일 수 있을까요?

네.
받았다!!
그럼 받은 이름을 스포티피에게 던져주세요!!
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>

응!잘 받았어!
그럼 다음은 얻은 데이터의 표시편!!

좋은 웹페이지 즐겨찾기