HarmonyOS鸿蒙Next中获取input框输入值异常

HarmonyOS鸿蒙Next中获取input框输入值异常

现象描述

在input框中输入内容，点击提交按钮时，必填项校验失败，提示“xxx为空，请输入”。获取输入值代码为：

e.target.attr.value，this.$element（'#id'）。attr.value。

问题分析

此类问题一般为获取值的方式不正确，从而导致未能获取input框内的输入值。

解决方法

通过onchange事件对模型赋值来获取input框的值，具体方法如下：

1. 初始化模型、

data:{
    accountValue=''
}

1. input框绑定事件

<input @change="getAccountValue" value="{{accountValue}}">

1. 赋值

getAccountValue: function(e) {
    this.accountValue = e.value // 此处为e.value, 而非e.target.attr.value
}

建议与总结

编码时尽量参考官方文档，而不是通过打印js对象的方式，js对象可能存在厂商兼容问题，而规范是统一的。

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

1. 在界面上的input框中输入值不会改变data中的accountValue。

2. 通过 this.accountValue = xxx 的方式修改input框的值，不会触发input的onchange事件。

3. 通过 this.accountValue = xxx 的方式修改值，如果修改前和修改后accountValue的值相同，则不会触发页面重新渲染。