zoukankan      html  css  js  c++  java
  • Vue+ElementUI,input控件清空数据恢复问题

    在Vue+ElementUI 中做数据校验。当用户输入错误时清空input控件在特定情况下会出现原有清空数据会恢复。这是因为在Vue中数据是双向绑定的,只清空控件文字但form表单中还有数据。

    附问题代码:

    1 <el-form-item label="编号" prop="asgnum" >
    2     <el-input v-model="form.asgnum" auto-complete="off" placeholder="请输入编号" maxLength="50"
    3               onblur ="if(this.value.replace(/[u4E00-u9FA5]/g,'aa').length > this.maxLength){//超过就提示
    4                         alert('不得超过' + this.maxLength + '个字符(中文占2个字符)');this.value='';}">
    5     </el-input>
    6 </el-form-item>

    解决方法:只需要把Html对象监听改成 oninput 即可。

    原因:onblur 为失焦监听会允许用户先录入数据在进行检查。

       oninput为键盘输入监听先进行检查避免用户把错误的值录入到表单中。 

    上面的方法对于用户体验并不友好所以补充:

    直接通过录入from表单,当为无数据是给赋值为 ' ' 

    //部分截取  
    function queryData(oneQuery){
            if (oneQuery != null && oneQuery != undefined && oneQuery != ''){
                vue.filters.ocename = oneQuery;
            }else {
                vue.filters.ocename = '';
            }
            vue.····();    //调用vue的查询方法
        }

    以上的例子也许描述很混乱导致读者不明白我想表达的意思:

      简而言之核心思想就是既然是双向传值绑定,那就直接操作from表单的值就好了。

    如有错误请在下方批评讨论。虽然本人水平也非常有限,如需帮助也可以留言私信。

  • 相关阅读:
    maven 3.2.5 的安装,部署和实例
    Java8 stream操作toMap的key重复问题
    Jenkins配置定时任务注意点
    npm install提示node-sass错误
    centos 使用docker 安装 teamcity
    centos 不能连接外网,使用本地yum源安装软件
    git添加本地代码到远程仓库
    mysql 新建外网用户 和只读用户
    mysql 删除重复数据保留最新一条
    批量删除redis缓存
  • 原文地址:https://www.cnblogs.com/ic710/p/10942104.html
Copyright © 2011-2022 走看看