美文网首页前端开发那些事儿
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