Element input Vue修改数据视图没有更新，和（json、数组监听的坑）

最新推荐文章于 2024-08-20 09:29:00 发布

MG516

最新推荐文章于 2024-08-20 09:29:00 发布

阅读量9.4k

点赞数 1

文章标签： vue element 视图更新

本文链接：https://blog.csdn.net/weixin_39856066/article/details/83856369

版权

需求：输入框输入范围0-10，不符合要求的被替换成上次输入的值

<el-input style="width:90px;" v-model="setupData.returnCD" placeholder="停留时间"></el-input>
<span>s（0-10秒）</span>

坑1（json、数组监听新值==旧值）

1，监听setupData

<script>
watch:{
	'setupData': {
        handler(val,oldVal){
            localStorage.setupData = JSON.stringify(val)
        },
        deep: true
    },
}
</script>

会发现val===oldVal

官方文档这么说

在这里插入图片描述

2，监听setupData.returnCD（精确到指定的key可以准确监听到val和oldval）

<script>
watch:{
    'setupData.returnCD':function(val,oldval){
        if(this.setupData.ifReturnPage && (isNaN(val) || val>10 || val<0)){
            this.$set(this.setupData,'returnCD',oldval);
        }
    }
}
</script>

坑2（修改数据视图没有更新）

上面监听到数据在0-10，然后重新赋值，发现值变了但是视图没有更新

尝试了一些方法，发现赋值语句加上延迟，问题就解决了

'setupData.returnCD':function(val,oldval){
    if(this.setupData.ifReturnPage && (isNaN(val) || val>10 || val<0)){
        setTimeout(()=>{
            this.$set(this.setupData,'returnCD',oldval);
        },1)
    }
}