您的位置：首页 > Web前端 > Vue.js

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

2017-10-17 11:12 831 查看

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>

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  vue input
相关文章推荐
新的分享
章节导航