vue3表单项的输入和选择有时失效

已于 2022-08-11 16:47:16 修改
阅读量361 收藏
点赞数
分类专栏： 开发中遇到的问题 文章标签： 前端 vue elementui
于 2022-08-11 16:45:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37755267/article/details/126288306
版权

今天遇到个很怪的问题

vue3+element plus 的项目，在一个弹框表单内写了三个select下拉框，发现选项有时能选上有时点击毫无反应。

检查了表单model绑定的值还有每个select对应v-model绑定的值，都没问题

最终发现在el-form上绑定了一个ref，然而在steup中缺未定义，定义一下就ok了

 

如果要问为什么，答案是我也不知道

生活的打工仔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue表情输入组件 微信face表情组件
10-17
主要为大家详细介绍了Vue表情输入组件，微信face表情组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue.js单向绑定和双向绑定实例分析
10-18
主要介绍了Vue.js单向绑定和双向绑定,结合实例形式分析了vue.js单向绑定与双向绑定相关原理、实现方法及操作技巧,需要的朋友可以参考下
Web前端笔记-解决Vue编写的输入框（input、textarea等）使用JS设置value时提交表单无效的问题
IT1995的博客
02-07 2374
主要的原因是vue相当于套了一层，界面上的输入框会关联model，提交表单的时候，他是直接提交model的值，而不是传统的输入框里面的值。 所以用这种： let textAreaItem = document.getElementsByTagName("textarea")[0]; textAreaItem.value = "XXXXXXXXXXXXXX"; 此时界面上已经有值了，可能数据点下输入框，数据消失，也可能不消失。 提交按钮按下后，要不就是前端提示没值，要不就是后端提示送来的值为空。
vue3-treeselect数据绑定失败问题解决
Nio的博客
06-30 2206
目标插件： https://github.com/megafetis/vue3-treeselect 问题描述： 是用这个插件做数据绑定的时候会出现这样的问题，当第一次赋值(v-model)时，可以实现选中，但当数据变化时，选中的数据还是之前的数据，不会自动的切换选中的数据。 <treeselect v-model="form.parentId" :options="deptOptions"
element-plus + VUE3 项目 build 之后 el-select无法选中
陈熙之的博客
05-19 859
这个项目在运行npm run dev，一切正常，但是build之后，所有el-select无法选中。项目里的el-select是被我单独封装了一个组件。 最后才发现是在data里定义的时候，没有定义对象的属性。 之前在vue2.0中，一直偷懒，data定义弹窗加载的对象都是直接定义的一个空对象，后面axios加载数据赋值后直接就能读取绑定上。 最后改成这样，build之后正常了。 也许因为没有定义对象的属性，不属于响应式对象，也许更多的原因，可能是因为封装的组件还不够完美，能觉得
vue3+element-plus 表单输入框无法输入、下拉框值不回显
qing_xing_的博客
07-11 2321
因为element-plus表单的ref和model的值不能设置相同的值，如果设置成相同的值，输入框无法输入、下拉框值不回显在element-plus的官方文档中是这样写的，可以看出来两者的值不一样 而在vue2+饿了么中是可以设置相同的值，官方写法如下...
vue3中使用el-form跟el-select时出现不能选中的问题
mini_1251861209的博客
03-08 1386
检查el-form的ref跟model是否同名了， 如果同名了，会出现很多未知的bug，比如ref双向绑定的数据可以打印，但是属性读不到之类的错误
基于Vue3和TypeScript的日历日程组件设计源码
最新发布
05-31
共30个文件，采用Vue3、TypeScript和HTML等语言开发，涉及多种文件类型如Vue组件、TypeScript源代码、JSON配置文件、Git忽略文件、NPM忽略文件、LICENSE文件、Markdown文档、HTML文档和SCSS样式表等。该项目是一个...
vue3-icon-picker：Vue3项目的绝佳图标选择器
03-04
Vue3图标选择器 Vanilla Js版本是由很棒的人在这里开发的-https: 由移植到Vue3 :) 查看的演示:) 如何建造 git clone https://github.com/hasinhayder/vue3-icon-picker.git cd vue3-icon-picker yarn yarn dev ...
vue3 初体验之使用element-plus的el-select报错Unhandled error during execution of scheduler flush
热门推荐
YouthMe的博客
12-22 1万+
笔者最近在用vue3 写自己的博客，后端使用element-plus 在给el-select绑定数据时惊奇的发现报错了 但根据我在vue2.x上的经验感觉这样写并没有什么毛病， 根据多次尝试，当我给v-for的数据给定了初始值后发现报错没有了，这里可能是vue3还在beta中所以存在的bug， 期待后续vue官方的解决 ...
vue+element ui中select组件选择失效问题原因与解决方法
bossjing的博客
07-10 4783
.当表单form赋完值后，如果后续又对form中某一属性值进行操作如图： 此处对form中的attId进行操作 后续如果form表单组件中使用select组件同时绑定attId这个值 如图： 此时select选择框点击选项表单中是不做显示的也就是说选择完之后没有反应，此时应该在select组件上加上强制渲染 如图： ...
vue3中使用element puls ui组件库的el-form,无法输入的问题
Start的小笔记
12-30 1539
element-plus表单无法输入 可能 el-form 的model 中的 ruleForm 跟系统冲突了，换成其他变量就可以 <template> <div class="login"> <div class="container"> <el-form ref="ruleForm" :model="ruleForm" label-width="120px" class="demo-ruleForm">
vue3+ts引用radio单选按钮报错SyntaxError: The requested module ‘/node_modules/.vite/deps/@nutui_nutui.js?v=e9
weixin_58149434的博客
12-09 151
解决nut-radiogroup报错
Vue3 element-plus el-select 无法选中，又不报错
m0_37616866的博客
04-26 2597
Vue3 中el-select 下拉框 使用的坑
关于Vue3使用element-plus表单组件无法修改的问题
m0_74037817的博客
05-18 444
可能是我的理解不太行吧。
给input框赋值成功后input框不能进行编辑
吃瓜群众的博客
04-01 1万+
选中一项后，input框不能进行编辑 <el-select v-model="input.memoStyle" placeholder="Log Landlord Call" @change="memoStyleChange"> <el-option v-for="item in options" ...
input框不可编辑的三种方法
SUNN1Y的博客
10-27 3587
文章来源:https://blog.csdn.net/qq_16858683/article/details/80742803 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.xjx100.cn/news/369710.html 如若内容造成侵权/违法违规/事实不符，请联系邮箱：2375622971@qq.com进行反馈，一经查实，立即删除！
解决vue3.0+vant 表单元素 Radio 单选框 无效问题
weixin_38808271的博客
03-21 4996
解决vue3.0+vant 表单元素 Radio 单选框 无效问题
vue的form表单字段添加数据校验必填等属性却无效的解决办法
weixin_44074879的博客
05-31 3645
明明在<el-form>里添加:rules="dataRule"这个属性，且也在js代码里加入了dataRule的定义， 即对<el-form-item>的<el-select>标签里添加了字段必填不能为空的message提示。 但奇怪的是在表单提交时，竟还是没有字段为空的限制，竟还是提交成功了？ 查了半天代码，才发现就是提交表单的函数有问题，原来是我没有加dataForm的校验判断，添加正确的代码如下： this.$refs['dataForm']
vue3 实现单向数据流
08-05
在Vue 3中，实现单向数据流可以通过使用Composition API中的`readonly`函数。`readonly`函数可以接收一个对象，并返回一个只读的代理对象，使得这个对象的属性只能进行读取操作，而不能进行修改操作。这样，当Model...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

生活的打工仔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值