• 1
  • 新人请关照

vue中如何实现省市区三级联动

image.png 三个下拉框

阅读 947
评论
    1 个回答
    • 1.7k

    用watch

    <select v-model="provinceId">
      <option v-for="item in provincies" 
      :value="item.value"
      :key="item.value">
        {{item.text}}
      </option>
    </select>
    data() {
      return {
        provinceId: '',
        cityId: '',
        countyId: '',
        
        provincies: [],
        cities: [],
        counties: []
      }
    }
    
    
    watch: {
        async provinceId(now) {
            const result = await API.getCities({proviceId: now});
            // 上级变动,下级需要重置。
            this.cityId = '';
            this.countyId = '';
            this.cities = result.data;
        }
    }