需求：輸入框輸入範圍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)
    }
}