解决vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等）
更新时间：2018年07月26日 11:31:31 作者：雪梅零落
这篇文章主要介绍了解决vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等），解决方法是使用this.$forceUpdate()强制刷新，文章给大家分享了代码案例，需要的朋友参考下吧
问题描述：
在使用Vue框架开发时，在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值；
解决：
运用 this.$forceUpdate()强制刷新
代码案例
<Select v-model="carSafeLine.insuranceName" placeholder="请选择" class="mulisel option-h" filterable clearable :disabled="editstatus" @on-change="selectInsurance"> <Option v-for="item in dataArr" :key="item.code" :value="item.code" :label="item.codename" :disabled="item.disabled"></Option> </Select>
methods: {
selectInsurance(){ //刷新车辆保险可选状态
for(var i=0; i<this.dataArr.length; i++){
var flag = false; //默认没有选中
var itemI = this.dataArr[i];
for(var j=0; j<this.form.carInsuranceVOList.length; j++){ //检测选项是否已被选中过
var itemJ = this.form.carInsuranceVOList[j];
if(itemI.code == itemJ.insuranceName){
flag = true;
break;
}
}
if(flag){
itemI.disabled = true;
}else{
itemI.disabled = false;
}
}
this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
}
}
总结
以上所述是小编给大家介绍的解决vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
相关文章
这篇文章主要为大家介绍了vue项目里的权限控制，文中有详细的代码示例供大家参考，有需要的朋友可以借鉴参考下，希望能够有所帮助2023-06-06
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
这篇文章主要介绍了解决elementUI 切换tab后 el_table 固定列下方多了一条线问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
vue/react项目刷新页面出现404报错的原因及解决办法
Vue项目打包部署到线上后,刷新页面会提示404,下面这篇文章主要给大家介绍了关于vue/react项目刷新页面出现404报错的原因及解决办法,文中将解决的办法介绍的很详细,需要的朋友可以参考下2023-05-05
这篇文章主要为大家详细介绍了Vue.js实现多条件筛选、搜索、排序及分页的表格功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
为了提高页面展示效果，登录界面内容比较单一的，粒子效果作为背景经常使用到，vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果，本文给大家分享在实现过程中遇到问题，需要的朋友一起看看吧2020-02-02
今天小编就为大家分享一篇使用Vue.set()方法实现响应式修改数组数据步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
vue对象添加属性(key:value)、显示和删除属性方式
这篇文章主要介绍了vue对象添加属性(key:value)、显示和删除属性方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要为大家详细介绍了vue的全选组件封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
这篇文章主要为大家详细介绍了Vue使用echarts定制特殊的仪表盘，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
vue-calendar-component 封装多日期选择组件的实例代码
这篇文章主要介绍了vue-calendar-component 封装多日期选择组件,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
最新评论