Having just started with VUEJS, I am facing a challenge in populating a vuetify select element with the names of countries from a local JSON file that contains an array of JSON objects. Instead of displaying the options correctly, it is creating individual select objects for each country.
Below is the code snippet for 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>
And here is the script I am using:
<script>
import Vue from "vue";
import VeeValidate from "vee-validate";
import countryData from '@/components/countryData.json';
Vue.use(VeeValidate);
export default {
name: "signup",
$_veeValidate: {
validator: "new"
},
data: () => ({
countryData: countryData,
country: ''
})
</script>
This is the structure of the JSON file:
[
{
"id": 1,
"name": "Afghanistan",
"iso3": "AFG",
"iso2": "AF",
"country_code": "4",
"phone_code": "93",
"capital": "Kabul",
"currency": "AFN",
"states": ["Badakhshan","Badgis"...]
},
{
...
}
]
View the output of my codes here.