vue+element-ui中form输入框无法输入问题的解决方法
一.问题发现:
笔者在制作登录页面前端时使用elementui+vue技术,发现输入框无法输入任何内容。
在csdn上查阅很多文章后发现都无法解决,于是去elementui官网进行反复查看才发现问题所在。最终发现问题是input标签中v-model写的不恰当导致无法生效/忘记书写v-model。如果有相同问题的可以看看本文有可能能帮助解决您的问题,下列解决过程以供参考。
二.正确案例与错误原理:
查看官网对于表单Form一栏的使用说明,官网首先给出了一个经典案例,其中就有我们需要的“在form中成功实现input需求"这一功能。例如下图中的Activity form:
...中间其他功能为了便于观看进行了省略,只抓取了重要内容。
可以发现重要的一点,即在<el-form>中写<el-input>必须要在input标签中定义v-model,具体应为v-model:表格model.输入内容名。且之后还需要对表格model中属性进行初始化操作,否则仍然会报错。
三.问题解决
第一种情况: 官网可以解决
可以先尝试使用上面官网给出的写法,在后续的<script>中import reactive,再用const form进行初始化,如果不报错那么就可以成功实现输入功能,如官网演示。
第二种情况:官网不能解决,页面仍无法显示,npm控制台报一个Warning,Waring内容为:export default (reexported as default ) was not found in -!..
这个问题主要出在<script>中,由于版本等问题该vue文件不支持官网的写法,即无法使用import { reactive} from 'vue'。这也是笔者遇到的问题,下面给出我的一种解决方案:在script标签中使用data返回表中属性来初始化内容。此图中的login是我自己开发过程中定义的表格名,相当于官网中的form,username和password相当于表格需要输入的属性,input标签中 v-model仍然使用v-model:表格model.输入内容名的方式表示。
最终实现的效果如下,输入栏中已经可以输入内容,该form中两个input在同一行的原因是form中添加了inline:true内联属性:
总结
到此这篇关于vue+element-ui中form输入框无法输入问题的解决方法的文章就介绍到这了,更多相关element-ui form输入框无法输入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
- vue中Element-ui 输入银行账号每四位加一个空格的实现代码
- 详解Vue3.0中ElementPlus<input输入框自动获取焦点>
- element input输入框自动获取焦点的实现
- Vue ElementUI实现:限制输入框只能输入正整数的问题
- Element Input输入框的使用方法
- vue element-ui实现input输入框金额数字添加千分位
- Vue elementUI表单嵌套表格并对每行进行校验详解
- element表单验证如何清除校验提示语
- Vue Element校验validate的实例
- element必填校验输入空格问题修改正则表达式、请求拦截器实现所有输入框去除首尾空格(推荐)
相关文章
详解Vue 中 extend 、component 、mixins 、extends 的区别
这篇文章主要介绍了Vue 中 extend 、component 、mixins 、extends 的区别,非常不错,具有参考借鉴价值,需要的朋友可以参考下2017-12-12antd vue 表格rowSelection选择框功能的使用方式
这篇文章主要介绍了antd vue 表格rowSelection选择框功能的使用方式,具有很好的参考价值,希望对大家有所帮助。以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。2022-12-12前端启动出现报错提示vue-cli-service serve的原因及解决办法
这篇文章主要给大家介绍了关于前端启动出现报错提示vue-cli-service serve的原因及解决办法,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2023-11-11解决项目vite1.0升级到2.0打包遇到Some chunks are larger问题
本文主要介绍了解决项目vite1.0升级到2.0打包遇到Some chunks are larger问题,文中根据实例编码详细介绍的十分详尽,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2022-03-03
最新评论