v-distpicker重置數據的問題

最近在做公司的一個項目，里面用到了地址選擇，所以引入了v-distpicker，但是在使用的時候遇到了一些問題。

廢話不多說，上代碼：

html：

<div class="addressCheckBox">
  <v-distpicker wrapper="addressCheck"
                :province="regForm.comAddress.province"
                :city="regForm.comAddress.city"
                :area="regForm.comAddress.area"
                @selected="addressChecked"></v-distpicker>    // @selected方法是當 省-市-區全部選擇完成后觸發的方法
</div>

data：

data () {
    return {
      regForm: {
        comAddress: {
          province: '',
          city: '',
          area: ''
        }
      }
    }
  }

js方法：

// v-distpicker的方法，當“區”選中后執行

addressChecked (data) {
      this.regForm.comAddress.province = data.province.value
      this.regForm.comAddress.city = data.city.value
      this.regForm.comAddress.area = data.area.value
      console.log(this.regForm.comAddress)
    }

// 表單的清空方法

regReset () {
  this.$refs['regForm'].resetFields()    // 表單中其他數據的重置方法
  this.regForm.comAddress.province = ''    // 清空 v-distpicker 中的 省

  this.regForm.comAddress.city = ''    // 清空 v-distpicker 中的 市

  this.regForm.comAddress.area = ''    // 清空 v-distpicker 中的 區

}

結果發現只有省-市-區全部選中的時候才可以執行清空操作，然后排查了一下原因，最后發現只有把 v-distpicker的幾個事件改變方法寫全並把選擇的數據賦值到data，才可以實現只有“省”或者“省-市”選擇時候的清空操作。所以猜測 v-distpicker 的值綁定並不是雙向數據綁定

:province="regForm.comAddress.province"
:city="regForm.comAddress.city"
:area="regForm.comAddress.area"

下面是修改完之后的代碼：

html：

<div class="addressCheckBox">
            <v-distpicker wrapper="addressCheck"
                          :province="regForm.comAddress.province"
                          :city="regForm.comAddress.city"
                          :area="regForm.comAddress.area"
                          @selected="addressChecked"
                          @province="onChangeProvince"
                          @city="onChangeCity"
                          @area="onChangeArea"></v-distpicker>
          </div>

 

js方法：

onChangeProvince (data) {
      this.regForm.comAddress.province = data.value
    },
    onChangeCity (data) {
      this.regForm.comAddress.city = data.value
    },
    onChangeArea (data) {
      this.regForm.comAddress.area = data.value
    },
    addressChecked (data) {
      this.regForm.comAddress.province = data.province.value
      this.regForm.comAddress.city = data.city.value
      this.regForm.comAddress.area = data.area.value
      console.log(this.regForm.comAddress)
    }

 

以上就是使用的時候遇到的問題，有不對的地方還望看到的大佬指正。

另外還有一個問題未解決：

 

 地址選擇后邊框變黑，跟其他表單樣式不怎么匹配。

然后看了調試的樣式，並沒有找到active和focus的樣式，IE中就正常，不知道是不是瀏覽器渲染的問題。