Access value and key in vuejs from a json string

Question

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>

Your response is an object where the two character country values are the properties? — Bert
– Bert, Commented Jun 25, 2017 at 0:02

David · Accepted Answer · 2017-06-25 00:02:19Z

1

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

edited Jun 25, 2017 at 0:02

answered Jun 24, 2017 at 23:52

David

7871 gold badge7 silver badges17 bronze badges

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

Comments

Azat Akmyradov · Accepted Answer · 2017-06-25 00:01:56Z

0

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

edited Jun 25, 2017 at 0:01

answered Jun 24, 2017 at 23:55

Azat Akmyradov

1762 gold badges2 silver badges10 bronze badges

Collectives™ on Stack Overflow

Access value and key in vuejs from a json string

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related