vue2-省市县三级联动选择框

Json数据：https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json

 如何访问本地文件参考：vue-访问本地json文件_vue3读取json文件-CSDN博客

 .vue文件：

<template>
           <select v-model="mailAddress1" style="width: 19rem;" @change="provinceChange">
            <option :value="item" v-for="(item, index) in provinceList" :key="index">{
   
   { item.name }}</option>
          </select>
          <select v-model="mailAddress2" style="width: 19rem;margin-left:1rem;" @change="cityChange">
            <option :value="item" v-for="(item, index) in cityList" :key="index">{
   
   { item.name }}</option>
          </select>
          <select v-model="mailAddress3" style="width: 19rem;margin-left:1rem;">
            <option :value="item" v-for="(item, index) in countyList" :key="index">{
   
   { item.name }}</option>
          </select>
</template>
<script>
export default {
  data() {
    return {
      mailAddress1: '',
      mailAddress2: '',
      mailAddress3: '',
      provinceList: '',
      cityList: '',
      countyList: ''
    };
  },
  mounted() {
    fetch('/addData.json')
      .then(response => response.json())
      .then(res => {
        this.provinceList = res
      });
  },
  methods: {
    provinceChange() {
      this.cityList = this.mailAddress1.areaList
      this.countyList = ""
    },
    cityChange() {
      this.countyList = this.mailAddress2.areaList
    }
  }
}
</script>