美文网首页
vue组件刷新

vue组件刷新

作者: 貓咪是大王 | 来源:发表于2019-04-19 10:37 被阅读0次

前两天,在工作中遇到一个特别难搞的问题,搞笑的是做梦梦到自己解决了,醒来却忘记了解决办法,确实挺绝望了,还好最后搞出来了,跟大家分享下我遇到的问题
我是用的element里面的 el-switch组件

  <el-switch
    v-model="item.isOn"
    :active-value=true
    :inactive-value=false
    :disabled="item.isDisableSwitch"
    @change="switchChange($event,item,index)"
     inactive-text="开启活动推荐">
  </el-switch>

这个开关是放在一个商品里面的,大致逻辑就是,按条件搜索出相关商品,当选中商品时才可以设置是否开启活动推荐,item.isOn是控制el-switch是否开启,(true为开启);item.isDisableSwitch设置是否禁用该el-switch开关
备注下:isOn,和isDisableSwitch都是我在拿到搜索出的商品信息后给每个商品添加的状态,我在data中增加一个数组checkSwitch:[],用于存放选中的switch集合,searchGoodsList用于存放条件搜索出来的所有商品数据

初始时遍历所有的商品数据,并给初始商品数据的isOn,isDisableSwitch赋值,但是在这里面需要判断一下

for(let i=0;i<this.searchGoodsList.length;i++){
        // 重新搜索  若商品的活动推荐已经开启 则开启活动状态 此时的活动推荐应该为可用状态
        let indx = this.checkSwitch.indexOf(this.searchGoodsList[i].id);
        if(indx != -1){
                this.searchGoodsList[i].isOn=true;
                this.searchGoodsList[i].isDisableSwitch=false;
        }else{
                this.searchGoodsList[i].isOn=false;
        }
        // 重新搜索  若选择的商品活动推荐未开启  则此时的开启活动推荐 应显示可用状态
        let inx = this.checkList.indexOf(this.searchGoodsList[i].id);
        if(inx != -1){
              this.searchGoodsList[i].isDisableSwitch=false;
        }else{
              this.searchGoodsList[i].isDisableSwitch = true;
       }
}

但是页面上的推荐开关点击去没有反应



并且当我有别的操作,比如点击旁边商品按钮或者切换搜索条件时,就有反应了,感觉总是慢半拍



我这边把点击时加的@change事件,把点击后此商品的isOn打印出来,显示为true,但是点击按钮就是没反应
 // 活动开启
        switchChange($event,item,index){
            console.log(item.isOn,'item.isOn');
            // 不传值  则默认值为true / false
            if(!item.isDisableSwitch){
                if($event){
                    if(this.checkSwitch.length<5){
                        this.checkSwitch.push(item.id);
                    }
                }
                else{//如果此时把开启的活动推荐关闭
                    for(let i=0;i<this.checkSwitch.length;i++){
                        if(this.checkSwitch[i]==item.id){
                            this.checkSwitch.splice(i,1);
                        }
                    }
                }
            }  
        },

我开始推测可能是新的属性没有触发数据更新
于是我使用的 $set方法在判断里面this.$set(item,'isOn',true),或者this.$set(item,'isOn',false),但是还是没反应
为了确确定它执行了我的操作判断,我在@change里面的判断中,各打印了1和2,控制台里面也显示了

我开始推测可能是数据源头出了问题,也就是搜索出来的时候数据锁死了,所以后来点击怎么也不改变,我在@change事件中将搜索出来的所有商品打印出来,但是发现,此时我点击的商品的isOn已经改变了

我猜可能是searchGoodsList数据没更新吧
for(let i=0;i<this.searchGoodsList.length;i++){
     this.$set(this.searchGoodsList[i],'isOn',item.isOn);
}

还是不行,百度了下,铺天盖地都是提示我视图不更新,我甚至跑到搜索点击后把每条搜索出来的数据也更新了下还是不行
最后中午用手机来百度,看到一个跟别的不一样的方法,于是抱着试试的态度加上去了

 // 活动开启
        switchChange($event,item,index){
            console.log(item.isOn,'item.isOn');
            // 不传值  则默认值为true / false
            if(!item.isDisableSwitch){
                if($event){
                    this.$forceUpdate();//强制重新渲染页面
                    if(this.checkSwitch.length<5){
                        this.checkSwitch.push(item.id);
                    }
                }
                else{//如果此时把开启的活动推荐关闭
                    this.$forceUpdate();//强制重新渲染页面
                    for(let i=0;i<this.checkSwitch.length;i++){
                        if(this.checkSwitch[i]==item.id){
                            this.checkSwitch.splice(i,1);
                        }
                    }
                }
            }  
        },

但是,但是竟然成功了,激动呀_
所以百度了下this.$forceUpdate()这个用法用于 强制刷新,用于解决v-for中修改某个属性值后页面v-if不改变的问题,也就是因为数据层次太多,render函数没有自动更新,需手动强制刷新组件

最后感谢https://blog.csdn.net/jerryyang_2017/article/details/82467016的分享,希望也能帮到你们

相关文章

网友评论

      本文标题:vue组件刷新

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