CODEWITHSUNDEEP
vue.js
user4655002
user4655002

Reputation:

Access value and key in vuejs from a json string

I have a json string which lists all of the countries, for example:

AC:"Ascension Island"
AD:"Andorra"
AE:"United Arab Emirates"
AF:"Afghanistan"
AG:"Antigua & Barbuda"

I am getting the value via a get request and assigning them to an array like so:

        axios.get('/countries')
            .then(response => {
                this.countries = response.data;
            })


    data: function () 
    {
        return {
            countries: [],

But when I am using the following, the page doesn't load and I do not get an error:

<select class="selectpicker" data-live-search="true" v-model="location" v-for="(value, key) in countries">  
    <option value="{{ key }}">{{ value }}</option>
</select>

Upvotes: 1

Views: 2223

Answers (2)

David
David

Reputation: 797

You can do this in vue with

<select class="selectpicker" data-live-search="true" v-model="location">
    <option :value="key" v-text="value" v-for="(value, key) in countries"></option>
</select>

Note that whatever you put the v-for on is the element that will repeat in the DOM. In your example, it would have been creating multiple select tags

Upvotes: 1

Azat Akmyradov
Azat Akmyradov

Reputation: 176

Move v-for to option tag. Previous was same thing

Upvotes: 0

Related Questions