VUE获取select中option的值，三级地址怎么获取用户选择的地址？

Z时代
2024-03-15
分类：IT

回答：

大致实现

<select v-model="selectedAddress">
  <option value="">请选择省份</option>
  <option v-for="(province, index) in provinces" :key="index" :value="province.name">{{ province.name }}</option></select>

export default {
  data() {
    return {
      selectedAddress: { province:'', city: '', district: ''},
      // 省、市、区列表
      provinces: [{name: '北京'}, {name: '上海'}], //...
      cities: [], //...
      districts: [] //...
    }
  },
  watch: {
    // selectedAddress的watcher，用来更新市和区的列表
    'selectedAddress.province'(newValue) {
      this.cities = this.getCityList(newValue)
      this.districts = []
    },
    'selectedAddress.city'(newValue) {
      this.districts = this.getDistrictList(this.selectedAddress.province, newValue)
    }
  },
  methods: {
    // 根据省份获取市的列表
    getCityList(provinceName) {
      // TODO: 根据省份名称获取城市列表
    },
    // 根据省份和城市获取区县的列表
    getDistrictList(provinceName, cityName) {
      // TODO: 根据省份和城市名称获取区县列表
    }
  }}