I try to when I choose the first select and second select will according to the first option and put data into second select

It can put the data into first select but the second select still can't run
I think maybe my emit does't work but I still can't solve it What the problem

This my App.vue

<template>
    <div>
        <div >
            <test
            :cities="cities"
            :areas="areas"
            @input="cityidx"
            ></test>
        </div>
        <Map></Map>
    </div>
</template>

<script>
    import test from '@/components/SelectBoxTest.vue';
    import Map from '@/views/Map.vue';
    import datalist from '@/assets/data.json';
    
    export default {
        name:'App',
        components: {
            test,
            Map,
        },
        data(){
            return{
                cityidx : 0,
            }
        },
        computed: {
            cities(){
                return datalist
            },
            areas(){
                // console.log(datalist)
                return datalist[this.cityidx].AreaList
            }
        }
    }
</script>

And this is my SelectBoxTest.vue

<template>
    <div >
        <!--CitySelect-->
        <div >
            <select id="countryselect"  v-model="cityselect">
                <option 
                v-for="(city , idx) of cities" 
                :key="city.text"
                :value="idx">{{city.CityName}}</option>
            </select>
        </div>
        <!--AreaSelect-->
        <div >
            <select id="areaselect"  v-model="areaselect">
                <option
                v-for="area of areas"
                :key="area.text"
                >{{area.AreaName}}</option>
            </select>
        </div>
    </div>
</template>
<!------------Cut Line------------>
<script>
    
    export default {
        name:'test',
        props:{
            'cities': {
                type: Array
            },
            'areas': {
                type: Array
            },
            'cityidx': {
                type: Number
            },
        },
        data(){
            return{
                cityselect: 0,
                areaselect: 0,
            }
        },
        computed: {
            update: {
                get(){
                    return this.cityselect
                },
                set(value){
                    this.$emit('input',value)
                }
            },
        },
    };
</script>

The part of json

[
   {
      "CityName":"臺北市",
      "CityEngName":"Taipei City",
      "AreaList":[
         {
            "ZipCode":"100",
            "AreaName":"中正區",
            "AreaEngName":"Zhongzheng Dist."
         }
      ]
   },
   {
      "CityName":"基隆市",
      "CityEngName":"Keelung City",
      "AreaList":[
         {
            "ZipCode":"200",
            "AreaName":"仁愛區",
            "AreaEngName":"Ren’ai Dist."
         }
      ]
   }
]

CodePudding user response：

You can try like this:

<template>
  <select v-model="selectedCity" name="city">
    <option v-for="city in cities" :key="city.id" :value="city.id">{{ city.name }}</option>
  </select>
  <select v-model="selectedArea" name="area">
    <option v-for="area in areas" :key="area.id" :value="area.id">{{ area.name }}</option>
  </select>
</template>

<script>
export default
{
  name: 'SelectCityArea',
  props:
  {
    currentCity:
    {
      type: [String, Number],
      default: null
    },
    currentArea:
    {
      type: [String, Number],
      default: null
    },
    cities:
    {
      type: Array,
      default: () => []
    },
    areas:
    {
      type: Array,
      default: () => []
    },
  },
  emits: ['update:current-city', 'update:current-area'],
  computed:
  {
    selectedCity:
    {
      get()
      {
        return this.currentCity;
      },
      set(val)
      {
        this.$emit('update:current-city', val);
      }
    },
    selectedArea:
    {
      get()
      {
        return this.currentArea;
      },
      set(val)
      {
        this.$emit('update:current-area', val);
      }
    },
  }
}

and then use it like

<template>
  <SelectCityArea v-model:current-city="myCity" v-model:current-area="myArea" :cities="cityList" :areas="areaList" />
</template>

<script>
export default
{
  name: 'ParentComponent',
  data()
  {
    return {
      myCity: null,
      myArea: null,
    }
  },
  computed:
  {
    cityList()
    {
      return [
        { id: 1, name: 'Paris' },
        { id: 2, name: 'New York' },
      ]
    },
    areaList()
    {
      return [
        { id: 3, name: 'Europe' },
        { id: 4, name: 'North America' },
      ]
    }
  }
}