vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue中input输入框输入不了值

vue项目中input输入框输入不了值问题及解决

作者:ノHonEy°倩

这篇文章主要介绍了vue项目中input输入框输入不了值问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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

原因

解决方案

在获取到后端的数据后,定义一个新的对象,把后端数值接收到这个新的对象中,再把新的对象赋值给 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框架不自动渲染的情况。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文