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

本文小编为大家详细介绍“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框架不自动渲染的情况。

读到这里，这篇“vue项目中input输入框输入不了值如何解决”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。