Populate Data from JSON File into DropDown in VueJS (Countries Example)

In this short tutorial, we'll see an example of how we can populate large data into the dropdown. For this, I am taking an example of countries wherein I will populate the list of countries in a select dropdown.

Store your list of data in a separate file, For this case, I am storing it in countries.js

module.exports = [{
    "name": "Afghanistan",
    "code": "AF"
}, {
    "name": "Åland Islands",
    "code": "AX"
}, {
    "name": "Albania",
    "code": "AL"
}, {
    "name": "Algeria",
    "code": "DZ"
}, {
    "name": "American Samoa",
    "code": "AS"
}
..
}];

Next up, in your VueJS component, you can import this file using the require method and bind it to a data property

Here is how the Vue component script looks like


let countries = require('../data/countries.js');
export default {
    name: 'example-component',
    data(){
        return{
            countryList: countries,
        }
    }
}

And now you can use your data binding in the template


<template>
    <div class="form-group">
            <label for="country">Your Country</label>
            <select
            class="form-control"
            v-model="formData.country"
            >
            <option :value="country.name" v-for="(country) in countryList" :key="country.code">{{country.name}}</option>
            </select>
        </div>
</template>

Comments