vue获取input输入值的问题解决办法
vue获取input输入值的问题解决办法
v-for里有多行input输入框,vue怎么获取某行的输入的值,随便写了点代码,意思就是后台返回了多行的list集合,页面显示多行输入框,当修改某行的值时进行校验,输入错误友好提示下,后边加个清空按钮,点击清空当前行数据,最开始的想法是,用v-bind:value绑定值,这样就出现一种情况,页面输入的值无法获取到,v-bind不会修改原始list里的值,而且ref也不能动态绑定,ref只能全部获取,this.$refs.itemPriceRef[],这样取的是所有输入框的值,是个数组,可以在提交前进行验证,但是无法判断某一行操作,并且vue操作DOM元素非常非常差,找了N多资料愣是没找到获取值的方法,最后发现用v-model直接绑定list里的值问题解决了,这样在修改时会直接修改list里的值,就不存在输入值和原始值不同的问题了,VUE在绑定值方面做挺方便的,刚开始学vue,用的不熟练,没想到这种方法,浪费了好多时间,不过也学会了很多东西。
PS:总结了3种方式获取页面输入框的值,1是用v-bind:value + ref方式获取,这种只适用有具体的输入框才行,
比如登录页,只有帐号密码输入框,
2是用v-model方式获取,这种是修改原始list值,所以在提交时,还需要遍历下原来的list,有点麻烦,
3是用v-model + ref 就是我写的这样,和2的区别是在提交时,直接用ref取值,感觉在未知数量的输入框时更好用
自己随便总结了下,估计在大神看来不值一提,但是对于我一个刚学习vue的人来说,确实浪费了我挺长时间,
花点时间记录下来,加深下印象。
<div v-model="skuList" v-for="(val, key) in skuList "> <div> <div> <span>价格:</span> <span><input type="text" v-model="val.price" ref="priceRef" v-on:change="checkPrice(val)"></span>
<pre name="code" class="html"><i v-on:click="dataClearStockPrice(val)"></i></pre></div><div><span>上限:</span><span><input class="stockTotal" type="text" v-model="val.stock" ref="totalRef"v-on:change="checkStock(val)"<span style="font-family:Arial,Helvetica,sans-serif"> ></span></span> <pre></pre> <p></p> <pre></pre> <pre name="code" class="html"><span style="font-family:Arial, Helvetica, sans-serif;"><i v-on:click="dataClearStockTotal(val)"></i> </span></div> </div> </div></pre><pre name="code" class="html"></pre><pre name="code" class="html"> checkPrice:function (data) { var priceReg = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/; if(!priceReg.test(data.price)){ Toast({message: "格式错误"}); data.price = ""; } }, checkStock:function (data) { var totalReg = /^[0-9]*$/; if(!totalReg.test(data.stock)){ Toast({message: "格式错误"}); data.stock = ""; } }, dataClearStockPrice:function(data){ data.price = ''; }, dataClearStockTotal:function(data){ data.stock = ''; },</pre><br data-filtered="filtered"> <span style="white-space:pre" data-filtered="filtered"></span> <pre name="code" class="html"></pre> <p></p> <p><br data-filtered="filtered"> </p>
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 扩展之Tensorflow2.0 | 21 Keras的API详解(下)池化、Normalization层
- 一个真实问题,搞定三个冷门pandas函数
- conda管理C源代码程序的时候总是出现库文件冲突或者缺失
- 如何获取非模式生物KEGG PATHWAY的基因集并用clusterProfile做GSEA?
- 通过视频着色进行自监督跟踪
- Python爬虫:一些常用的爬虫技巧总结
- 带你用 Python 实现自动化群控(入门篇)
- Chrome终于上线这项重磅功能,中国用户苦等多年!
- YOLO 算法最全综述:从 YOLOv1 到 YOLOv5
- 《JavaScript ES6 函数式编程入门经典》读书笔记
- Java9-Reactive Stream API响应式编程
- mybatis-plus增删改查以及前后端分离模式下的项目应用
- docker(常用软件安装)
- PyTorch版:集成注意力和MobileNet的YOLOv4
- 从源代码级别看懂MinIO对象存储网关的实现