Spotify + Vue.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>
응!잘 받았어!
그럼 다음은 얻은 데이터의 표시편!!
Reference
이 문제에 관하여(Spotify + Vue.js 조사에 신경 쓰는 미술가들의 인기!화면 검색), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/jacknightmare13/items/6fab17f0a29693b291dc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)