开发中使用到了date-picker日期选择器,重新赋值后再点击日期进行选择,却发现视图没有更新,提交后反而会显示修改后的结果。
尝试了许多方法,比如设置初始值、普通赋值、使用this.$set进行赋值,发现都没有效果。
最后通过this.$forceUpdate()强制更新解决问题!!!
Vue代码:
<el-date-pickerclearablesize="small"v-model="form.dateRange"type="daterange"value-format="yyyy-MM-dd"range-separator="to":start-placeholder='$t("caseindex.StartTime")':end-placeholder='$t("caseindex.EndTime")'@input="changeDate"></el-date-picker>
changeDate事件:
changeDate(){this.$forceUpdate()},
看网上解释是说:数据层次太多导致render函数没有自动更新,需要调用this.$forceUpdate()强制刷新,触发updated生命周期。
this.$forceUpdate()的作用:迫使VUE实例重新渲染。注意此方法只影响实例本身和插入插槽内容的子组件,并非所有的子组件。
若使用本文方法还未解决,建议参考 vue双向绑定失效,视图不更新,$set()失效解决办法,使用时间戳加强制更新的方式解决此类问题。
版权归原作者 码上出奇迹 所有, 如有侵权,请联系我们删除。