vue #click change api request url - rest

Question

I'm very new to Vue and got stuck at this point.
The problem: I'm not getting my select with v-model to change api url to change data on html.
This is my html:
<div class="uk-width-1-2#s">
<select class="uk-select" id="form-stacked-select" v-model="selected" >
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
</div>
<div v-else v-for="(cases, index) in cases_list" :key="index" >
<p>{{cases.deaths}} deaths.</p>
</div>
This is my Js:
const API_URL = 'https://covid19-brazil-api.now.sh/api/report/v1'
new Vue({
el: '#app',
data() {
return {
cases_list: [],
loading: true,
errored: false,
selected: 'df',
state: '',
number: '',
options: [
{ text: 'AC', value: 'ac' },
{ text: 'AL', value: 'al' },
{ text: 'AP', value: 'ap' },
{ text: 'AM', value: 'am' },
{ text: 'BA', value: 'ba' },
{ text: 'CE', value: 'ce' },
{ text: 'DF', value: 'df' },
{ text: 'ES', value: 'es' },
{ text: 'GO', value: 'go' },
{ text: 'MA', value: 'ma' },
{ text: 'MT', value: 'mt' },
{ text: 'MS', value: 'ms' },
{ text: 'MG', value: 'mg' },
{ text: 'PA', value: 'pa' },
{ text: 'PB', value: 'pb' },
{ text: 'PR', value: 'pr' },
{ text: 'PE', value: 'pe' },
{ text: 'PI', value: 'pi' },
{ text: 'RJ', value: 'rj' },
{ text: 'RN', value: 'rn' },
{ text: 'RS', value: 'rs' },
{ text: 'RO', value: 'ro' },
{ text: 'RR', value: 'rr' },
{ text: 'SC', value: 'sc' },
{ text: 'SP', value: 'sp' },
{ text: 'SE', value: 'se' },
{ text: 'TO', value: 'to' }
],
}
},
mounted() {
this.getCases();
},
methods: {
getCases() {
axios
.get(API_URL)
.then((response) => {
this.cases_list = response.data.data;
console.log(response.data.data);
})
.catch(error => {
console.log(error)
this.errored = true
})
.finally(() => this.loading = false)
}
}
})
My select option link to options array where I have texts and values, and every value should add on end of api url a 'uf/${option}' when selected...
Like: const API_URL = 'https://covid19-brazil-api.now.sh/api/report/v1' + 'uf/%{option}';
I'm very confused on how I make this select working. I was not able to find on vue documentation

Answer 1

You have to configure the URL before Axios call.
const API_URL = 'https://covid19-brazil-api.now.sh/api/report/v1/brazil'
new Vue({
el: '#app',
data() {
return {
cases_list: [],
loading: true,
errored: false,
selected: 'df',
state: '',
number: '',
options: [{
text: 'AC',
value: 'ac'
},
{
text: 'AL',
value: 'al'
},
{
text: 'AP',
value: 'ap'
},
{
text: 'AM',
value: 'am'
},
{
text: 'BA',
value: 'ba'
},
{
text: 'CE',
value: 'ce'
},
{
text: 'DF',
value: 'df'
},
{
text: 'ES',
value: 'es'
},
{
text: 'GO',
value: 'go'
},
{
text: 'MA',
value: 'ma'
},
{
text: 'MT',
value: 'mt'
},
{
text: 'MS',
value: 'ms'
},
{
text: 'MG',
value: 'mg'
},
{
text: 'PA',
value: 'pa'
},
{
text: 'PB',
value: 'pb'
},
{
text: 'PR',
value: 'pr'
},
{
text: 'PE',
value: 'pe'
},
{
text: 'PI',
value: 'pi'
},
{
text: 'RJ',
value: 'rj'
},
{
text: 'RN',
value: 'rn'
},
{
text: 'RS',
value: 'rs'
},
{
text: 'RO',
value: 'ro'
},
{
text: 'RR',
value: 'rr'
},
{
text: 'SC',
value: 'sc'
},
{
text: 'SP',
value: 'sp'
},
{
text: 'SE',
value: 'se'
},
{
text: 'TO',
value: 'to'
}
],
}
},
mounted() {
this.getCases();
},
watch: {
selected: function(val) {
this.getCases()
},
},
methods: {
getCases() {
console.log(API_URL + '/uf/' + this.selected);
axios
.get(API_URL + '/uf/' + this.selected)
.then((response) => {
this.cases_list = response.data;
console.log(response.data);
})
.catch(error => {
console.log(error)
this.errored = true
})
.finally(() => this.loading = false)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js" integrity="sha512-VZ6m0F78+yo3sbu48gElK4irv2dzPoep8oo9LEjxviigcnnnNvnTOJRSrIhuFk68FMLOpiNz+T77nNY89rnWDg==" crossorigin="anonymous"></script>
<div id='app' class="uk-width-1-2#s">
<select class="uk-select" id="form-stacked-select" v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
</div>