踩iviewui中Select 選擇器兩級聯動，重置查詢條件時第二級數據沒法清除的坑

小穎公司最近作的項目用的vue+iviewui+axios，在作項目的過程當中，遇到一個問題：

二級聯動的下拉框，第一個下拉框一直都有值，第二個下拉框是在選擇了第一個下拉框以後採起調用ajax獲取其值，但當點擊重置按鈕時，全部的查詢條件都要置空，因此這時第二個下拉框的 option 的值也應是空的，但事實是雖然小穎在點擊重置按鈕時把第二個下拉框的option綁定的值置空了，但它仍是能獲取到數據，最後定位到問題：
        獲取第二個下拉框的值是給第一個下拉框綁定的 on-change 中獲取的，因此當先選擇了第一個下拉框的值，再獲取到第二個下拉框的值，此時再點擊重置按鈕時，已經觸發了第一個下拉框的change事件。最後的解決方法是在on-change中先判斷當前第一個下拉框是否有值，有值再去調ajax獲取第二個下拉框的值。

沒法重置：

<template>
    <Select v-model="whereMap.model1" style="width:200px" @on-change="getCityList2Fun">
        <Option v-for="item in cityList1" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>
    <Select v-model="whereMap.model2" style="width:200px">
        <Option v-for="item in cityList2" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>
  <Button class="search-btn" type="default" @click="searchClear">清空</Button>
</template>
<script>
    export default {
        data () {
            return {
                cityList1: [
                    {
                        value: 'New York',
                        label: 'New York'
                    },
                    {
                        value: 'London',
                        label: 'London'
                    },
                    {
                        value: 'Sydney',
                        label: 'Sydney'
                    },
                    {
                        value: 'Ottawa',
                        label: 'Ottawa'
                    },
                    {
                        value: 'Paris',
                        label: 'Paris'
                    },
                    {
                        value: 'Canberra',
                        label: 'Canberra'
                    }
                ],
                cityList2:[],
                whereMap:{
                  model1: '',
                  model2: '',
                }
            }
        },
      methods: {
          getCityList2Fun(){
            this.cityList2=[
                    {
                        value: 'New York',
                        label: 'New York'
                    },
                    {
                        value: 'London',
                        label: 'London'
                    },
                    {
                        value: 'Sydney',
                        label: 'Sydney'
                    },
                    {
                        value: 'Ottawa',
                        label: 'Ottawa'
                    },
                    {
                        value: 'Paris',
                        label: 'Paris'
                    },
                    {
                        value: 'Canberra',
                        label: 'Canberra'
                    }
                ]
          },
            searchClear() {
              this.whereMap={};
              this.cityList2=[];
            }
        }
    }
</script>

修改後：

其實就是修改 getCityList2Fun 方法

getCityList2Fun() {
        if (this.whereMap.model1) {
          this.cityList2 = [
            {
              value: 'New York',
              label: 'New York'
            },
            {
              value: 'London',
              label: 'London'
            },
            {
              value: 'Sydney',
              label: 'Sydney'
            },
            {
              value: 'Ottawa',
              label: 'Ottawa'
            },
            {
              value: 'Paris',
              label: 'Paris'
            },
            {
              value: 'Canberra',
              label: 'Canberra'
            }
          ]
        }
      }