uniapp踩坑：页面视图不更新，拿不到最新数据

深度学习更新：强制刷新视图的Vue技巧与uniapp数据同步问题

原创已于 2022-11-16 16:30:25 修改 · 1.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #vue.js #elementui #前端 #javascript

于 2022-11-15 15:30:12 首次发布

本文介绍如何在Vue应用中使用$forceUpdate()确保表格视图实时更新，同时分享了uniapp中关于深度选择器修改样式无响应的解决方案。

使用this.$forceUpdate()里包裹关于视图的数据即可

小Demo，大致思路如下

//data
dataList:{
  xxx:[],//假如是表格数据
},

//js
getData(id){
   xxx接口({

        id:id

    }).then((res)=>{

     this.dataList.xxx = res.data

//循环遍历表格里获得的数据所有id,将参数传给其它接口,要强制刷新，所以要使用this.$forceUpdate()
     this.dataList.xxx.map((x) => {
              if (x.id == id) {
                x.max = maxNum.toFixed(2);
                x.min = minNum.toFixed(2);
                x.avg = avgNum;
              }

              //强制刷新表格数据
              this.$forceUpdate(this.dataList.xxx)

            });


})
},


getClick(val){
    //某个点击事件传参给接口函数

    this.getData(val.id)

},

作者上一篇文章，

uniapp踩坑之小程序：深度选择器修改样式无反应_意初的博客-优快云博客::deep和!important搭配使用https://blog.youkuaiyun.com/weixin_43928112/article/details/127774739