vue @click change api request url

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

tuhin47 · Accepted Answer · 2020-08-07 05:28:40Z

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>

edited Aug 7, 2020 at 5:28

answered Aug 7, 2020 at 5:17

tuhin47

6,2735 gold badges22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Lucas Marra Over a year ago

Hello! this worked very well. but broke my v-for code

<div v-else v-for="(cases, index) in cases_list" :key="index">                     <ul>Estado de {{cases.state}} com {{cases.cases}} casos e {{cases.deaths}} mortes.                     </ul>                 </div>

Can you please, explain or give me a direction on what "watch()" do?

Lucas Marra Over a year ago

I've made some changes and got something like that:

<div v-else v-for="option in cases_list"  :key="option.value" >                    <p>{{option}}</p>                        </div>

Now I'm returnin all data from api in selected option

tuhin47 Over a year ago

v-for accept an array. after the URL being changed the received response is an object, not an array. Use the base URL to get the array.

Lucas Marra Over a year ago

So, for an object, I should use what? v-if?

Collectives™ on Stack Overflow

vue @click change api request url

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related