V-Distpicker不能完整显示内容

V-Distpicker插件在列表中，或者在dialog中只显示了第一次的内容，第二次就开始报错。这个和前篇中的地图问题其实如出一辙。

解决办法，重加载，局部刷新。

<el-form-item label="门店区域：" :label-width="formLabelWidth" prop="region">
  <v-distpicker
    v-if="hackReset"
    :province="select1.province"
    :city="select1.city"
    :area="select1.area"
   v-model="temp.region"
   @province="selectProvince1"
   @city="selectCity1"
   @area="selectArea1" >
  </v-distpicker>
  </el-form-item>

data() {

　　return {

　　　　　　hackReset:true,
  }
}

handleUpdate(row) {

this.hackReset = false

this.$nextTick(() => {
  this.hackReset = true
})
}

这边来说一下$nextTick的作用

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM，API 文档中官方示例如下：

new Vue({

// ...

methods: {

// ...

example: function() {

// modify data

this.message = 'changed'

// DOM is not updated yet

this.$nextTick(function() {

// DOM is now updated

// `this` is bound to the current instance

this.doSomethingElse()

})

}

}

})

其实用惯了jquery的应该很眼熟，你有一个 jQuery 插件，希望在 DOM 元素中某些属性发生变化之后重新应用该插件，这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法。