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 的回調函數中執行從新應用插件的方法。