Populate select tag with data from API in Vue and Axios

Question

I want to populate select tag with data from api get request. Here is my html code

<div id="app">
    <label for="country" class="control-label">Country</label>
    <select v-model="selectedCountry" @change="onChangeCountry" name="country" id="country" class="form-control" tabindex="11">
        <option selected disabled value="">Please select one</option>
        @foreach($countries as $country)
            <option value="{{ $country->id }}">{{ $country->name }}</option>
        @endforeach
    </select>
    <label for="city" class="control-label">City</label>
    <select v-model="cities" name="city" id="city" class="form-control" tabindex="12">
        <option v-bind:value="city.id">@{{ city.name }}</option>
    </select>
</div>

And now my JavaScript code:

<script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        selectedCountry: '',
        cities: []
      },
      methods: {
          onChangeCountry: function (event) {
            axios.get('http://localhost:8000/api/cities/country/' + this.selectedCountry)
            .then(function (
                this.cities = response.data
            }).catch(function(error) {
                console.log('an error occured ' + error);
            });
          }
        }
    });
</script>

I'm pretty sure that the data is received because i did a lot of console.log but I don't know how to append the received data to my second select tag nor how to proceed.

Please read Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. — halfer
– halfer, Commented Mar 2, 2018 at 10:50
In your comments below, you have responded several times with the report that "it doesn't work". Please note that this is the least helpful response you can give a contributor. You are the eyes and ears on the problem, and it is your job to be as clear and verbose as you can. Consider these things: how did it not work? What did you observe? Were there any logs or errors, or did it partly work? What information can you send to the helpful person trying to help you, without any prompting? — halfer
– halfer, Commented Mar 2, 2018 at 10:53
i don't know what's happening, the select tag that i want to fill is still empty after so many attempts, and there is no errors in console — Wajdi Makhlouf
– Wajdi Makhlouf, Commented Mar 2, 2018 at 12:56

tony19 · Accepted Answer · 2022-07-14 23:52:35Z

5

Try this in the select

<select v-model="selectedCity" name="city" id="city" class="form-control" tabindex="12">

   <option v-for="(city,cityIndex) in cities" :key="city.id" :value="city.id">{{ city.name }}</option>

</select>

Add 'selectedCity' to the data object and then access its value through this.selectedCity

This is in the vue docs

https://v2.vuejs.org/v2/guide/list.html

https://v2.vuejs.org/v2/guide/forms.html#Select

edited Jul 14, 2022 at 23:52

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Mar 2, 2018 at 9:44

Sérgio Reis

2,5232 gold badges22 silver badges32 bronze badges

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

7 Comments

Wajdi Makhlouf Over a year ago

still doesn't do anything

Sérgio Reis Over a year ago

what does the axios request object returns?

Wajdi Makhlouf Over a year ago

an array of objects(the city object)

Wajdi Makhlouf Over a year ago

i don't know what's happening, the select tag that i want to fill is still empty after so many attempts, and there is no errors in console

Sérgio Reis Over a year ago

One thing that is confusing me is that you're using Vue and trying to use v-model, but on the same page you have a blade foreach. Please elaborate on the structure that you're using

|

Wajdi Makhlouf · Accepted Answer · 2018-03-02 15:27:41Z

2

I finally got it working
i just needed to create a city variable in data function
and in select i don't need to bind it to array of cities[], the city variable is fine v-model="city"

answered Mar 2, 2018 at 15:27

Wajdi Makhlouf

1032 gold badges3 silver badges9 bronze badges

2 Comments

Sérgio Reis Over a year ago

Can't see how that is actually different than what i answered

Wajdi Makhlouf Over a year ago

At the first i was biding to the array of cities using v-model but then i bind it to a single city object. I don't really get it because i'm a newbie to vuejs

Pianistprogrammer · Accepted Answer · 2019-02-20 03:19:13Z

1

<select v-model="country" class="form-control">
   <option disabled value="" selected="selected">Please select one</option>
   <option v-for="country in countries" :key="country.id" v-bind:value="country.id">
           {{country.name}}
     </option>

</select>
<script>
export default {
    data() {
        return {
            countries: {},
            country:''
    } 
</script>

answered Feb 20, 2019 at 3:19

Pianistprogrammer

6375 silver badges16 bronze badges

Comments

score 0 · Accepted Answer · 2018-03-02 10:50:07Z

0

You need to use v-for to loop the cities and create the option elements:

<select name="city" id="city" class="form-control" tabindex="12">
    <option v-for="(city, index) in cities" 
            :key="index" 
            :value="city.id">@{{ city.name }}
    </option>
</select>

Also, change your data property into a function so it's reactive:

 data () {
    return {
      selectedCountry: '',
      cities: []
    }
 }

edited Mar 2, 2018 at 10:50

answered Mar 2, 2018 at 9:45

user320487

6 Comments

user320487 Over a year ago

Updated the answer

Wajdi Makhlouf Over a year ago

still doesn't do anything

Wajdi Makhlouf Over a year ago

do you want any other details i believe everything is clear but why is this happening to me ?

user320487 Over a year ago

What does console.log(response.data) show? Can you include the output in your answer?

Wajdi Makhlouf Over a year ago

(2) [{…}, {…}]0: {id: 4, country_id: 4, name: "West Cortney", created_at: "2018-02-28 13:21:41", updated_at: "2018-02-28 13:21:41"}1: {id: 6, country_id: 4, name: "Ceceliaton", created_at: "2018-02-28 13:21:41", updated_at: "2018-02-28 13:21:41"}length: 2__proto__: Array(0) 11:23:17.800

|

Collectives™ on Stack Overflow

Populate select tag with data from API in Vue and Axios

4 Answers 4

7 Comments

2 Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

2 Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related