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 相关文章推荐
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
JavaScript Distilled 基础知识与函数
Apr 07 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 Javascript
基于jQuery的ajax方法封装
Jul 14 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
通过JavaScript下载文件到本地的方法(单文件)
Mar 17 Javascript
详解Vue前端生产环境发布配置实战篇
May 07 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 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
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
jquery validate poshytip 自定义样式
2012/11/26 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
Python管理Windows服务小脚本
2018/03/12 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
机电一体化毕业生求职信
2013/11/02 职场文书
办公室副主任岗位职责
2013/11/25 职场文书
思想政治教育专业个人求职信范文
2013/12/20 职场文书
大学生毕业鉴定
2014/01/31 职场文书
幼儿园儿童节活动主持词+串词大全
2014/03/21 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
Javascript的promise,async和await的区别详解
2022/03/24 Javascript