Hi @thri60,
Try this (sorry I don’t use a Json file but what I did is the same, that can be usefull for others who don’t use Json file) :
TEMPLATE
<template>
<q-page class="flex flex-center">
<div class="q-gutter-md" style="width:250px">
<div>
<q-select
behavior="menu"
rounded
outlined
v-model="ModelState"
:options="states"
label="Located in what State"
@input="pushCity"
style=""
/>
</div>
<div>
<q-select
behavior="menu"
rounded
outlined
v-model="Modelcity"
:options="city"
label="City"
/>
</div>
</div>
</q-page>
</template>
SCRIPT
<script>
export default {
data() {
return {
ModelState: null,
states: [],
Modelcity: null,
city: [],
location :[
{
state: {
name: "Abia State",
id: 1,
locals: [
{ name: "Aba South", id: 1 },
{ name: "Arochukwu", id: 2 },
{ name: "Bende", id: 3 },
{ name: "Ikwuano", id: 4 },
{ name: "Isiala Ngwa North", id: 5 },
{ name: "Isiala Ngwa South", id: 6 },
{ name: "Isuikwuato", id: 7 },
{ name: "Obi Ngwa", id: 8 },
{ name: "Ohafia", id: 9 },
{ name: "Osisioma", id: 10 },
{ name: "Ugwunagbo", id: 11 },
{ name: "Ukwa East", id: 12 },
{ name: "Ukwa West", id: 13 },
{ name: "Umuahia North", id: 14 },
{ name: "Umuahia South", id: 15 },
{ name: "Umu Nneochi", id: 16 }
]
}
},
{
state: {
name: "France",
id: 2,
locals: [
{ name: "Paris", id: 1 },
]
}
}
]
}
},
methods: {
pushCity() {
const isnameAdd = (element) => element.state.name == this.ModelState;
const index = this.location.findIndex(isnameAdd);
this.city = []
this.location[index].state.locals.forEach(element => {
const name = element.name;
this.city.push(name);
});
}
},
mounted() {
this.location.forEach(element => {
const name = element.state.name;
this.states.push(name);
});
}
}
</script>
