vue项目中input输入框输入不了值问题及解决
更新时间：2023年04月23日 09:10:36 作者：ノＨonEy°倩
这篇文章主要介绍了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组件的继承用法,本文通过实例代码案例讲解给大家介绍的非常详细，需要的朋友可以参考下2022-08-08
如何在Vue3中正确使用ElementPlus,亲测有效,避坑
这篇文章主要介绍了如何在Vue3中正确使用ElementPlus,亲测有效,避坑！具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家详细介绍了vue实现无缝轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要介绍了解决vue路由发生了跳转但是界面没有任何反应问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue-cli3开发Chrome插件实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要为大家详细介绍了vue实现列表无缝滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了Vue 重置组件到初始状态的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
Vue动态路由权限涉及根据用户权限动态生成路由配置,实现此功能可增强应用安全性、灵活性,提升用户体验和开发效率,本文就来介绍一下前端单独实现vue动态路由的示例代码,感兴趣的可以了解一下2024-09-09
这篇文章主要介绍了Vue.js 实现tab切换并变色操作讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
Element Plus 日期选择器获取选中的日期格式(当前日期/时间戳格式）
如果想要获取选中的日期时间就需要通过,Element Plus 日期选择器 format属性和value-format属性,format指定输入框的格式,value-format 指定绑定值的格式,本篇文章就给大家介绍Element Plus 日期选择器获取选中的日期格式(当前日期/时间戳格式）,感兴趣的朋友一起看看吧2023-10-10
最新评论