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>
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程