获取input框输入值异常

Posted 2021-09-15 华为开发者论坛

现象描述

在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对象可能存在厂商兼容问题，而规范是统一的。

目前快应用的数据绑定方式为单向：

1. 在界面上的input框中输入值不会改变data中的accountValue。
2. 通过 this.accountValue = xxx 的方式修改input框的值，不会触发input的onchange事件。
3. 通过 this.accountValue = xxx 的方式修改值，如果修改前和修改后accountValue的值相同，则不会触发页面重新渲染。

---

原文链接：https://developer.huawei.com/consumer/cn/forum/topic/0204411123244470357?fid=18

原作者：Mayism