美文网首页前端开发那些事儿
vue数据更新了,视图不更新,怎么解决?

vue数据更新了,视图不更新,怎么解决?

作者: 焚心123 | 来源:发表于2020-08-06 09:33 被阅读0次
    • 可以参考下面这篇文章
      答:https://blog.csdn.net/bigbear00007/article/details/102594645
    • 首先在Vue2.0版本中,在data中声明的变量会被监听,实时更新视图的,一般我们可以在data中声明一些变量来进行数据的一个操作,不过有时候,我们需要给一个数据中加一个变量,最后通过当前的下标来让这个变量为true或者false,这时Vue就检测不到了,所以就会产生数据发生了改变,视图没有更新的原因。
        onLoad: function (options) {
                var that=this;
              // 循环金额的时候,只显示最后一个,给每个金额后main加 二位小数点
              var price;
                that.list.data.orderList.forEach((v)=>{
                  v.isUp=false;通过给数据中加这个变量,来达到点击是否显示还是隐藏
                  price=v.amountPay.toFixed(2);
                  that.price.push(price)
                })
            },
         methods:{
                 // 点击查看卡信息,显示信息
                  show(index){
                    // 调用强制更新方法this.$forceUpdate()会更新视图和数据,触发updated生命周期。
                        this.$forceUpdate();//也可以使用object.assign()进行更新视图
                   //点击当前的下标的数据的时候,让这个变量为true,在点击收起的时候,让当前的变量隐藏
                        this.list.data.orderList[index].isUp=true;
                                          //方法中可以直接传递当前的数据(item),item.flg=!item.flg;也可以
                                          //第一个参数,如果你当前的数据如this.list.data.orderList是数组就写[],是对象就写{}
                                          this.list.data.orderList=Object.assign([],this.list.data.orderList);
                  },
                            // 点击收起
                  hide(index){
                    // 调用强制更新方法this.$forceUpdate()会更新视图和数据,触发updated生命周期。
                      this.$forceUpdate()
                      this.list.data.orderList[index].isUp=false;
                  }
    
          }
    
    
    • 当我们使用这种方式的时候,Vue就会检测不到,就会视图不更新,this.list.data.orderList[index].isUp=true;
    • 解决视图不更新还有其他的几种方式,可以点击上面的链接去看看,这个 this.$forceUpdate();不要经常去用,会有点问题

    相关文章

      网友评论

        本文标题:vue数据更新了,视图不更新,怎么解决?

        本文链接:https://www.haomeiwen.com/subject/cixhlktx.html