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: ""

    参考:https://www.cnblogs.com/xhliang/p/11940418.html

    记录自己的采坑之路,需要时方便查找
  • 相关阅读:
    如何用vue做计算器功能
    js反弹运动
    $.each的使用
    js文字滚动事件
    根据服务器时间,计算出时间轴的倒计时。
    时间格式转时间戳的几种方法
    匀速运动升级
    js匀速运动
    js图片滚动无缝衔接
    webFrame
  • 原文地址:https://www.cnblogs.com/hahahakc/p/13619864.html
Copyright © 2011-2022 走看看