现象描述
在input框中输入内容,点击提交按钮时,必填项校验失败,提示“xxx为空,请输入”。获取输入值代码为:
e.target.attr.value,this.$element(‘#id’).attr.value。
问题分析
此类问题一般为获取值的方式不正确,从而导致未能获取input框内的输入值。
解决方法
通过onchange事件对模型赋值来获取input框的值,具体方法如下:
1、初始化模型、
1. data:{
2. accountValue:''
3. }
2、input框绑定事件
1. <input @change="getAccountValue" value="{{accountValue}}"></input>
3.赋值
1. getAccountValue: function(e) {
2. this.accountValue = e.value // 此处为e.value, 而非e.target.attr.value
3. }
建议与总结
编码时尽量参考官方文档,而不是通过打印js对象的方式,js对象可能存在厂商兼容问题,而规范是统一的。
目前快应用的数据绑定方式为单向:
-
在界面上的input框中输入值不会改变data中的accountValue。
-
通过 this.accountValue = xxx 的方式修改input框的值,不会触发input的onchange事件。
- 通过 this.accountValue = xxx 的方式修改值,如果修改前和修改后accountValue的值相同,则不会触发页面重新渲染。
原文链接:https://developer.huawei.com/consumer/cn/forum/topic/0204411123244470357?fid=18
原作者:Mayism