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中就正常，不知道是不是浏览器渲染的问题。