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

Livewire Component Library

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

And now you can use your data binding in the template

Host Laravel Application on DigitalOcean

Use coupon 5balloons on this Cloudways Affiliate URL to get special discount.

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

Join my VueJS Newsletter

As I advance in my Journey of learning VueJS, I will be working on different exercises and challenges. Subscribe to receive the latest tutorials (every week) directly in your inbox.

    I won't send you spam. Unsubscribe at any time.

    Powered By ConvertKit

    Site Footer