用VUE+AXIOS实现联动菜单三级联动

用VUE+AXIOS实现联动菜单三级联动

在PAY字段、通用订单、商城中，

需要填写地址的地方，官方是用jquery.ld.js 来实现三级联动，

由于不想用JQ，所以用VUE+AXIOS把菜单的三级联动重新了一次。

  <div id="app">
    <select v-model="selectedRegion1" @change="onRegion1Change">
      <option value="">请选择</option>
      <option v-for="region in regions" :value="region.region_id">{{ region.region_name }}</option>
    </select>
    <select v-model="selectedRegion2" @change="onRegion2Change" v-if="subRegions1.length > 0">
      <option value="">请选择</option>
      <option v-for="region in subRegions1" :value="region.region_id">{{ region.region_name }}</option>
    </select>
    <select v-model="selectedRegion3" v-if="subRegions2.length > 0">
      <option value="">请选择</option>
      <option v-for="region in subRegions2" :value="region.region_id">{{ region.region_name }}</option>
    </select>
  </div>

JS部份

<script>
new Vue({
  el: '#app',
  data() {
    return {
      regions: [],
      subRegions1: [],
      subRegions2: [],
      selectedRegion1: '',
      selectedRegion2: '',
      selectedRegion3: ''
    };
  },
  mounted() {
    this.getRegions();
  },
  methods: {
    getRegions() {
      axios.get('index.php?s=api&c=api&m=linkage_ld&mid=order&file=&code=twd')
        .then(response => {
          this.regions = response.data.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
    onRegion1Change() {
      this.subRegions1 = [];
      this.subRegions2 = [];
      this.selectedRegion2 = '';
      this.selectedRegion3 = '';
      if (this.selectedRegion1) {
        axios.get(`index.php?s=api&c=api&m=linkage_ld&mid=order&file=&code=twd&parent_id=${this.selectedRegion1}`)
          .then(response => {
            this.subRegions1 = response.data.data;
          })
          .catch(error => {
            console.error(error);
          });
      }
    },
    onRegion2Change() {
      this.subRegions2 = [];
      this.selectedRegion3 = '';

      if (this.selectedRegion2) {
        axios.get(`index.php?s=api&c=api&m=linkage_ld&mid=order&file=&code=twd&parent_id=${this.selectedRegion2}`)
          .then(response => {
            this.subRegions2 = response.data.data;
          })
          .catch(error => {
            console.error(error);
          });
      }
    }
  }
});
</script>