Vue省市县联动

<div id="app">
    <select id="province" @change="changeProvince" v-model="provinceSelected">
        <!-- <option value="0">--请选择--</option> -->
        <option :value="province.id" v-for="province in provinces">{{province.name}}</option>
    </select>
    <select id="city" v-model="citySelected" @change="changeCity">
        <option :value="city.id" v-for="city in cities">{{city.name}}</option>
    </select>
    <select id="area" v-model="areaSelected">
        <option :value="area.id" v-for="area in areas">{{area.name}}</option>
    </select>
</div>

<script>
  var vm = new Vue({
      el: "#app",
      data: {
          //data开头的数据相当于后端拿到的数据
          dataProvince: [{
              id: 1,
              name: "江苏"
          }, {
              id: 2,
              name: "云南"
          }, ],
          dataCity: [{
              id: 1,
              provinceId: 1,
              name: "苏州"
          }, {
              id: 2,
              provinceId: 1,
              name: "无锡"
          }, {
              id: 3,
              provinceId: 1,
              name: "常州"
          }, {
              id: 4,
              provinceId: 1,
              name: "镇江"
          }, {
              id: 5,
              provinceId: 1,
              name: "南京"
          }, {
              id: 6,
              provinceId: 2,
              name: "昆明"
          }, {
              id: 7,
              provinceId: 2,
              name: "大理"
          }, ],
          dataArea: [{
              id: 1,
              cityId: 1,
              name: "苏州市区"
          }, {
              id: 2,
              cityId: 1,
              name: "昆山"
          }, {
              id: 3,
              cityId: 1,
              name: "张家港"
          }, {
              id: 4,
              cityId: 1,
              name: "常熟"
          }, {
              id: 5,
              cityId: 1,
              name: "太仓"
          }, ],

          //以下数据为前端接收的数据
          provinces: [],
          provinceSelected: 0, //双向绑定已选择的省份
          cities: [],
          citySelected: 0, //双向绑定已选择的城市
          areas: [],
          areaSelected: 0
      },

      mounted() {
          this.getProvince();
      },

      methods: {
          //获取省份信息
          getProvince() {
              this.provinces = this.dataProvince;
              if (this.provinces.length > 0) {
                  this.provinceSelected = this.provinces[0].id; //默认选中第一个
                  this.changeProvince(); //初始化城市下拉框
              }
          },
          //省下拉框发生改变时触发
          changeProvince() {
              this.cities = this.dataCity.filter(m => m.provinceId == this.provinceSelected)
              if (this.cities.length > 0) {
                  this.citySelected = this.cities[0].id;
                  this.changeCity(); //初始化县级市下拉框
              }
          },
          //城市下拉框发现改变时触发
          changeCity() {
              this.areas = this.dataArea.filter(m => m.cityId == this.citySelected)
              if (areas.length > 0) {
                  this.areaSelected = this.areas[0].id;
              }
          }
      },
  })
</script>