大家好，我是初心。

前言：以下只针对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最大值设置出现的问题以及黑科技解决方案相关推荐

vue 中 input事件
vue 中 input事件 input事件的使用 <div :id="inputId" :class="['textarea_content_right']&quo ...
vue中input标签的使用
vue中input标签的使用普通input标签 <input type="text" value="" placeholder="placeh ...
Easyui中input标签设置只读
Easyui中input标签设置只读直接在input标签中设置属性:readonly="readonly". 具体例子: <input class="easyui ...
（建议收藏）第一人称视角带你走进 Vue 源码世界
点击上方关注前端技术江湖,一起学习,天天进步前言本文不引战,成熟的人应该脱离框架的范畴,而不是纠结谁更好或者谁更不好.有道是黑猫白猫,抓到老鼠就是好猫. 所以本文会带大家读源码.简单易懂,大佬小 ...
「建议收藏」第一人称视角带你走进 Vue 源码世界
前言本文不引战,成熟的人应该脱离框架的范畴,而不是纠结谁更好或者谁更不好.有道是黑猫白猫,抓到老鼠就是好猫. 所以本文会带大家读源码.简单易懂,大佬小白都能看明白.并收获益处. 从 new 一个 V ...
南屿带你走进 vue
### Vue > Vue是一个前端js框架,由尤雨溪开发,是个人项目 Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它 ...
什么是Mixin？带你了解Vue中的Mixin混入
什么是Mixin?本篇文章带大家了解一下Vue中的Mixin混入,介绍Mixin和Vuex的区别,Mixin的使用方法,希望对大家有所帮助! Vue框架现在基本上已经占据了前端的半壁江山,Vue的数据 ...
vue中input绑定事件
做的越多遇到的问题越多,解决的问题越多,你会的就越多,加油我们都知道vue中是可以双向数据绑定的,但是有时候我们的事件会和双向绑定冲突. input中如果用了v-model,那么给它绑定的事件就不会 ...
在vue中input标签手机号码进行正则验证
今天遇到一个问题就是在vue中给input进行正则手机号码的验证下面是今天的代码,用js进行书写,没有用elementUI,代码如下: <div cla ...

小弟带你走进VUE中input最大值设置出现的问题以及黑科技解决方案

大家好，我是初心。

前言：以下只针对input为number类型并且设置最大值时对应的解决方案。至于其他情况，课后可以自己试试。。。额，那么继续了

目标：提供2种黑科技解决input值不能视图不更新问题

Don't BB,Look me copy

以上分别时html代码data数据以及js方法

这样有的朋友该吐槽了，用max=“300”，控制最高值。那么我就要回答你，少年你还是想的太简单，等一下我解释给你，Don't worry！

然后上视图

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

此时输入出现3009了，是什么导致JS GG的呢，我尝试去找问题。

可能与上面的代码有所不同，不过在这里效果都是一样。

debugger不亏是神码，这时会发现

TM明明把值重置了300为什么视图上面还是显示3009（PS：明明不是人名）

我针对了我的想法，想出了2种解决方案

解决方案1：把data里数据的值强行改变你输入的值，之后再做判断，并且赋值。这样一来data里的值一定有变动，那么视图也会更新

图1方案是失败的，图2为正确操作。至于为什么要加this.$nextTick，不懂得可以查一下，这里就不做引申了。

解决方案2：input事件传递$event，直接改input里的值

PS：此方法在element-ui上的标签不能解决，若你用了emement-ui还是老老实实的用上面的方法吧，因为element-UI有一套自己的方法传值，不支持$event,翻一下源代码就能看到。所以比较蛋疼

代码html:

js:

这样一来也解决了。

总结：

方法1：在视图上输入3009看到的是3009然后的一瞬间马上变回300，是有过度效果的。

方法2：在视图上无变化，输入300，在输入一个数字，直接变300，无过度变化。但是此方法不适用于element-ui！

大家好，我是初心！感谢你能够花时间观看。

第一次写博客有什么地方不好还请见谅，若有大神能够指点再感谢不过。

那么小弟先撤了！拜拜

小弟带你走进VUE中input最大值设置出现的问题以及黑科技解决方案相关推荐

最新文章

热门文章

小弟带你走进VUE中input最大值设置出现的问题以及黑科技解决方案

大家好，我是初心。

前言：以下只针对input为number类型并且设置最大值时对应的解决方案。至于其他情况，课后可以自己试试。。。额，那么继续了

目标：提供2种黑科技解决input值不能视图不更新问题

Don't BB,Look me copy

以上分别时html代码data数据以及js方法

这样有的朋友该吐槽了，用max=“300”，控制最高值。那么我就要回答你，少年你还是想的太简单，等一下我解释给你，Don't worry！

然后上视图

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

此时输入出现3009了，是什么导致JS GG的呢，我尝试去找问题。

可能与上面的代码有所不同，不过在这里效果都是一样。

debugger不亏是神码，这时会发现

TM明明把值重置了300为什么视图上面还是显示3009（PS：明明不是人名）

我针对了我的想法，想出了2种解决方案

解决方案1：把data里数据的值强行改变你输入的值，之后再做判断，并且赋值。这样一来data里的值一定有变动，那么视图也会更新

图1方案是失败的，图2为正确操作。至于为什么要加this.$nextTick，不懂得可以查一下，这里就不做引申了。

解决方案2：input事件传递$event，直接改input里的值

PS：此方法在element-ui上的标签不能解决，若你用了emement-ui还是老老实实的用上面的方法吧，因为element-UI有一套自己的方法传值，不支持$event,翻一下源代码就能看到。所以比较蛋疼

代码html:

js:

这样一来也解决了。

总结：

方法1：在视图上 输入3009看到的是3009然后的一瞬间马上变回300，是有过度效果的。

方法2：在视图上 无变化，输入300，在输入一个数字，直接变300，无过度变化。但是此方法不适用于element-ui！

大家好，我是初心！感谢你能够花时间观看。

第一次写博客有什么地方不好还请见谅，若有大神能够指点再感谢不过。

那么小弟先撤了！拜拜

小弟带你走进VUE中input最大值设置出现的问题以及黑科技解决方案相关推荐

最新文章

热门文章

方法1：在视图上输入3009看到的是3009然后的一瞬间马上变回300，是有过度效果的。

方法2：在视图上无变化，输入300，在输入一个数字，直接变300，无过度变化。但是此方法不适用于element-ui！