vue获取input输入值的问题解决办法


Posted in Javascript onOctober 17, 2017

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 相关文章推荐
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
JS中递归函数
Jun 17 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
D3.js实现雷达图的方法详解
Sep 22 Javascript
js实现固定宽高滑动轮播图效果
Jan 13 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 #Javascript
Bootstrap图片轮播效果详解
Oct 17 #Javascript
vue组件之Alert的实现代码
Oct 17 #Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 #Javascript
vue-cli之router基本使用方法详解
Oct 17 #Javascript
教你用Cordova打包Vue项目的方法
Oct 17 #Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 #Javascript
You might like
海贼王动画变成“真人”后,凯多神还原,雷利太帅了!
2020/04/09 日漫
ASP和PHP都是可以删除自身的
2007/04/09 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
JavaScript 密码强度判断代码
2009/09/05 Javascript
JavaScript中的集合及效率
2010/01/08 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
python、Matlab求定积分的实现
2019/11/20 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
python实现人工蜂群算法
2020/09/18 Python
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
个人自我评价分享
2013/12/20 职场文书
学习经验交流会主持词
2014/04/01 职场文书
军人离婚协议书样本
2014/10/21 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang