大家好，我是初心。

前言：以下只針對input為number類型并且設置最大值時對應的解決方案。至于其他情況，課后可以自己試試。。。額，那么繼續了

目標：提供2種黑科技解決input值不能視圖不更新問題

Don't BB,Look me copy

1 <el-table-column label="入庫數量" prop="zj" min-width="80" align="center" show-overflow-tooltip> 2 <template slot-scope="scope"> 3 <el-input 4 :value="scope.row.rksl" 5 @input="numberChange(arguments[0],scope.row.id)" 6 @change="numberChange(arguments[0],scope.row.id)" 7 type="number" 8 :max="scope.row.sl" 9 > 10 </el-input> 11 </template> 12 </el-table-column>

?

1 [ 2 { 3 id : 0,sm : '自動化管理', zz : '黎明', cbs : '電子音像出版社', ghs : '電子音像出版社', jg : 30.00, zk : '7.0', 4 rksl : 300, sl : 300, bz : '' 5 } 6 ]

?

以上分別時html代碼data數據以及js方法

這樣有的朋友該吐槽了，用max=“300”，控制最高值。那么我就要回答你，少年你還是想的太簡單，等一下我解釋給你，Don't worry！

然后上視圖

PS：我此次用的element-UI做的，但是不影響，效果都一樣。

可以看到input里初始值是數量的頂峰值，那么重點來了，只要input框里輸入數值位數在3位數，那么max=“300”方法和這我寫的這個都是有效的。

但是輸入在4位數的時候，比如 輸入299你在輸入任意一個數的話，值是300，再接著輸入任意一個數就會如下圖所示(上面max=“300”的方法也是下面效果)

?

?

?此時輸入出現3009了，是什么導致JS GG的呢，我嘗試去找問題。

?

可能與上面的代碼有所不同，不過在這里效果都是一樣。

debugger不虧是神碼，這時會發現

?

?TM明明把值重置了300為什么視圖上面還是顯示3009（PS：明明不是人名）

事情發展到了這里，我反思了一下，究竟什么讓視圖沒有變化。然而我想了大概30S左右，得出一個結果。當你輸入300的時候date里的值也是300，在加一個數字的時候 JS計算后也是的300 那么data里的值的300和新的300沒有變化，所以導致視圖沒有更新。當然這也只是個猜想。既然是猜想那么就證實一下吧。

我針對了我的想法，想出了2種解決方案

解決方案1：把data里數據的值強行改變你輸入的值，之后再做判斷，并且賦值。這樣一來data里的值一定有變動，那么視圖也會更新

圖1方案是失敗的，圖2為正確操作。至于為什么要加this.$nextTick，不懂得可以查一下，這里就不做引申了。

然后此方案完美解決（黑科技有沒有），這種解決方法也是夠賤得了，但是看下面的方法你就知道這方法還遠遠不夠賤。

解決方案2：input事件傳遞$event，直接改input里的值

PS：此方法在element-ui上的標簽不能解決，若你用了emement-ui還是老老實實的用上面的方法吧，因為element-UI有一套自己的方法傳值，不支持$event,翻一下源代碼就能看到。所以比較蛋疼

代碼html:

1 <input 2 :value="scope.row.rksl" 3 @input="numberChange($event,scope.row.id)" 4 @change="numberChange($event,scope.row.id)" 5 type="number" 6 :max="scope.row.sl" 7 />

js:

1 numberChange(e,id){ 2 let val = e.target.value; 3 let index = findIndex(this.tableData1,{id : id}); 4 let newVal = Math.min(toNumber(val), this.tableData1[index].sl); 5 this.tableData1[index].rksl = toNumber(newVal); 6 e.target.value = toNumber(newVal); 7 }

這樣一來也解決了。

總結：

方法1：在視圖上? ?輸入3009看到的是3009然后的一瞬間馬上變回300，是有過度效果的。

方法2：在視圖上? 無變化，輸入300，在輸入一個數字，直接變300，無過度變化。但是此方法不適用于element-ui！

大家好，我是初心！感謝你能夠花時間觀看。

第一次寫博客有什么地方不好還請見諒，若有大神能夠指點再感謝不過。

那么小弟先撤了！拜拜

?

轉載于:https://www.cnblogs.com/winter0618/p/9851179.html

總結

以上是生活随笔為你收集整理的小弟带你走进VUE中input最大值设置出现的问题以及黑科技解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。