問題描述：

在使用Vue框架和element-ui開發(fā)時，下拉框遇見一個問題，在函數(shù)中改變了頁面中的某個值，在函數(shù)中查看是修改成功了，但在頁面中沒有及時刷新改變后的值，也就是下拉框值無法選中。（踩坑踩得莫名其妙）

代碼段：

<el-select v-model="value" placeholder="請選擇" @change="change()">

? ? ? <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>

</el-select>

解決方法：

出現(xiàn)這個問題好像是因為下拉框數(shù)據(jù)是循環(huán)掉別的接口得來的，因為數(shù)據(jù)層次太多，render函數(shù)沒有自動更新，需手動強制刷新所以我直接強制刷新了值，而forceUpdate就是重新render。

寫一個方法，在select的change事件中調(diào)用此方法，運用 this.$forceUpdate()強制刷新，頁面正常選值。

change(){

? ? ? this.$forceUpdate()

? },

小結：

同理，forceUpdate()這個方法也適用一些很深的組件 state 已經(jīng)改變了的時候，可以在該組件上面調(diào)用，解決頁面v-for中修改item屬性值后頁面頁面值不改變的問題。

另：el-input用@input,el-date-picker用@blur

轉自：https://blog.csdn.net/weixin_43216105/article/details/86699772