景象形容

在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.value3.   }

倡议与总结
编码时尽量参考官网文档，而不是通过打印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