需求:输入框输入范围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)
}
}