<div id="app">
<div id="select-country">
<div class="selectbox">
<select v-model="selectedCountry" v-on:change="changeCountry">
<option disabled value="">国を選択してください</option>
<option v-for="country in countries" v-bind:value="country">{{ country }}</option>
</select>
</div>
</div>
<ol class="result">
<li v-for="item in items" class="result-track">
<a v-bind:href="item.url" target="_blank">
<p class="result-track-artist">{{ item.name }}</p>
</a>
</li>
</ol>
</div>select {
padding: 5px;
}var app = new Vue({
el: "#app",
data: {
items: null,
countries: [
'Japan',
'United States',
'United Kingdom',
'Italy',
'India',
'Jamaica'
],
selectedCountry: ''
},
methods: {
changeCountry: function(){
var vm = this
var params = { page: 1, limit: 20, country: this.selectedCountry }
axios
.get(
"https://ws.audioscrobbler.com/2.0/?method=geo.gettopartists&api_key=ac4b32125398b90907cdba9817865dd2&format=json",
{ params }
)
.then(function(response) {
vm.items = response.data.topartists.artist;
});
}
}
});
External CSS
This Pen doesn't use any external CSS resources.