Element input Vue修改資料檢視沒有更新,和(json、陣列監聽的坑)
阿新 • • 發佈:2018-11-15
需求:輸入框輸入範圍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) } }