Am a Newbie to VUEJS, am having trouble populating a vuetify select element with a names ofcountries from a local JSON file containing an array of a json objects. Instead of populating the options it creates single select objects for each country.

Here is my Form....

<form>
  <v-select v-validate="'required'" v-bind="countryData"
  v-for="item in countryData" :key="item.name" :items="item.name"
  v-model="select" :error-messages="errors.collect('country')"
  label="Country" data-vv-name="country" prepend-icon="mdi-flag"
  required></v-select>
 </form>

This is my script.....

<script>
import Vue from "vue";
import VeeValidate from "vee-validate";
import countryData from '@/ponents/countryData.json';
Vue.use(VeeValidate);
export default {
  name: "signup",
  $_veeValidate: {
    validator: "new"
  },
  data: () => ({
    countryData: countryData,
    country: ''
    })
</script>

Here JSON file Structure...

[
    {
        "id": 1,
        "name": "Afghanistan",
        "iso3": "AFG",
        "iso2": "AF",
        "country_code": "4",
        "phone_code": "93",
        "capital": "Kabul",
        "currency": "AFN",
        "states": ["Badakhshan","Badgis"...]
    },
    {
        ...
    }
]

Output of my codes

Am a Newbie to VUEJS, am having trouble populating a vuetify select element with a names ofcountries from a local JSON file containing an array of a json objects. Instead of populating the options it creates single select objects for each country.

Here is my Form....

<form>
  <v-select v-validate="'required'" v-bind="countryData"
  v-for="item in countryData" :key="item.name" :items="item.name"
  v-model="select" :error-messages="errors.collect('country')"
  label="Country" data-vv-name="country" prepend-icon="mdi-flag"
  required></v-select>
 </form>

This is my script.....

<script>
import Vue from "vue";
import VeeValidate from "vee-validate";
import countryData from '@/ponents/countryData.json';
Vue.use(VeeValidate);
export default {
  name: "signup",
  $_veeValidate: {
    validator: "new"
  },
  data: () => ({
    countryData: countryData,
    country: ''
    })
</script>

Here JSON file Structure...

[
    {
        "id": 1,
        "name": "Afghanistan",
        "iso3": "AFG",
        "iso2": "AF",
        "country_code": "4",
        "phone_code": "93",
        "capital": "Kabul",
        "currency": "AFN",
        "states": ["Badakhshan","Badgis"...]
    },
    {
        ...
    }
]

Output of my codes

• javascript
• vue.js
• vuejs2
• vue-ponent
• vuetify.js

1 Answer 1

You shouldn't use v-for to add data to the v-select ponent, you need only to pass contryData as value of items property :

 <v-select v-validate="'required'"  
    :items="countryData"
    item-text='name'
    item-value='id'
    v-model="country" 
    :error-messages="errors.collect('country')"
  label="Country" data-vv-name="country" prepend-icon="mdi-flag"
 required></v-select>

Note 'item-name' will control which field in your item object will be displayed, while 'item-value' will be the field that controls the selected option value. I chose 'id' for that but depending on your use case you might pick 'country_code' or something else.