5 Balloons

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>