zoukankan      html  css  js  c++  java
  • vue elementui input不能输入的问题

    在 vue  2.6.10 版本遇到了 首次进行编辑input 可以正常输入 但是再次进入不能正常输入,是因为我对input绑定的是对象内的变量,首次进入关闭之后我进行了对象的重置直接置为空对象,这样会导致这种错误的发生;

    //template
    <el-input v-model="myObj.input1"/>
    <el-input v-model="myObj.input2"/>
    
    //data里的数据 
    myObj:{
        input1:"",
        input2: "",
    }
    //methods中在关闭时进行重置 reset 这种重置方式 导致上面的问题
    reset(){
        myObj:{}
    }
    

    解决方法:

    方案1:重置时 精确到对应的变量

    reset(){
        myObj:{
            input1:"",
            input2: "",      
        }
    }

    方案2:给input绑定@input事件  有内容输入就实时更新视图 

    <el-input v-model="myObj.input1" @input="updateView($event)" />
    <el-input v-model="myObj.input2" @input="updateView($event)" />
    
    //methods
    updateView(e) {
        this.$forceUpdate()
    }    
    

    方案3:绑定到input中的双向数据变量 不是对象内部的值就不会遇到这个问题

    <el-input v-model="input1" @input="updateView($event)" />
    <el-input v-model="input2" @input="updateView($event)" />
    
    //data
     input1: "",
     input2: ""
    

      

  • 相关阅读:
    Android Training
    Android Training
    简述Activity与Window关系
    简述Activity生命周期
    Python基础之元组及range
    python基础数据类型之列表
    python之字符串
    python基础之int整型
    python基础知识之格式化
    Python基础知识初识 (二)
  • 原文地址:https://www.cnblogs.com/xhliang/p/11940418.html
Copyright © 2011-2022 走看看