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 的回调函数中执行重新应用插件的方法。
![](https://img2018.cnblogs.com/blog/1247144/201810/1247144-20181026105210176-736980108.jpg)