how to filter cities based on the state selcted

[thri60]

I am working on a form that involves users selecting their exact city based on the state selected. I have a Json file of this states and cities but cant seem to pull it into a qselect… or I cant seem to pull the cities into the city qselect

i dont exactly no how to describe my issue… but I hope you understand

this is the json file (with reference to 1 state)
[{
"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 }
]
}
}]

this is how the form looks like

code:
<div class=“q-gutter-md”>
<div>
<q-select
behavior=“menu”
rounded
outlined
v-model=“locations”
:options=“states”
label=“Located in what State”
/>
</div>
<div>
<q-select
behavior=“menu”
rounded
outlined
@filter=“filterFn”
v-model=“category”
:options=“categories”
label=“City”
/>
</div>
</div>

<script>
import location from “assets/location.json”;
export default {
data() {
return {
locations: [],
states: [],
city: [],
state: null,
city: null,

},

mounted() {
location.forEach(element => {
const name = element.state.name;
this.states.push(name);
});
}
};
</script>

[Lurrik]

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>

[thri60]

@lurrik thanks so much… will try it out and get back to you…

[thri60]

This post is deleted!