«

vue项目中input输入框输入不了值如何解决

时间:2024-5-20 08:53     作者:韩俊     分类: Javascript


本文小编为大家详细介绍“vue项目中input输入框输入不了值如何解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue项目中input输入框输入不了值如何解决”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

    编辑页面v-model 绑定的input 输入框输入不了值

    原因

      对象 会递归遍历data中定义的所有变量 所以如果没定义就监听不到变化

      数组只有几个数组方法添加的会响应 通过下标不响应(push,pop会不响应)

    解决方案

    在获取到后端的数据后,定义一个新的对象,把后端数值接收到这个新的对象中,再把新的对象赋值给 data里面定义的对象

        if(res.data.success == true){
            let resForm={}  //重新定义一个对象
             resForm={...res.data.data.activityInfo}
             resForm.activeTime=[res.data.data.activityInfo.startTime,res.data.data.activityInfo.endTime],                  
             resForm.listOne=res.data.data.listOne
             resForm.listTwo=res.data.data.listTwo
             this.formData={...resForm}  //把定义的对象赋值给data里面定义的对象
             console.log(this.formData,2121212121)
      }

    vue技能点--el-input输入框无法输入、无法修改

    现象

    使用Vue框架,发现输入框<input>或者<el-input>的内容无法修改,也无法输入。

    解决方案

    首先,检查绑定方式,应该使用v-model,有时候会误用:value,导致无法修改。

    其次,如果是绑定数组元素等复杂对象,可以在输入框添加@input="onInput()",然后在methods中添加方法:

          onInput() {
          this.$forceUpdate();
        },

    forceUpdate用来强制渲染,避免data中对象层次太深,Vue框架不自动渲染的情况。

    标签: javascript vue

    热门推荐