vue3中使用el-form跟el-select时出现不能选中的问题

最新推荐文章于 2024-07-08 11:00:12 发布
最新推荐文章于 2024-07-08 11:00:12 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： vue 前端 文章标签： vue.js vue3 el-form el-select
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mini_1251861209/article/details/114536862
版权
前端 同时被 2 个专栏收录
44 篇文章 0 订阅
订阅专栏
vue
8 篇文章 0 订阅
订阅专栏
当在Vue的el-form中，ref和model设置为相同名称时，可能会导致一些不可预知的bug。这些bug可能表现为数据双向绑定在console.log中可见，但无法正常读取组件属性。本文将深入探讨这个问题的原因及解决策略，帮助开发者避免此类问题。
摘要由CSDN通过智能技术生成

检查el-form的ref跟model是否同名了，

如果同名了，会出现很多未知的bug，比如ref双向绑定的数据可以打印，但是属性读不到之类的错误

 

mini_qiu
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中el-form标签中的自定义el-select下拉框标签功能
10-15
在Vue.js框架中，`el-form` 是Element UI库中用于创建表单的组件，它提供了丰富的表单处理功能，如验证、响应式布局等。`el-select` 是`el-form` 中常用的组件，用于创建下拉选择框，用户可以在预设的选项中进行选择...
vue3+elementui Plus 表单select下拉框选中后无效？
weixin_55341181的博客
07-11 3447
使用了纯vue3写法写了个下拉框，出现了个莫名其妙的bug，就是下拉选中后无效。示例： 代码： 下拉框选中后就是无法回显，打印出来的form对象也没有选中的数据。打印： 解决方案：就是form的model变量名和ref的名字重复了，把两个其中一个改下就好了，保证不重名。 总结：form的model和ref重名会出现很多奇奇怪怪的bug 大概是冲突吧 但是这个问题在vue2是没有遇到过的。......
vue+element select下拉框选择不上的问题
m0_59634511的博客
08-01 1852
el-dialog title="修改上报比例" v-model="changeDialogVisible" width="30%" center :destroy-on-close="true"<el-select v-model="changeFrom.ratio" style="width: 100%;<el-button type="primary" @click="submitUp">确 定</el-button><el-form-item label="上报比例" prop="ratio">
vue3中获取ref元素的几种方式
最新发布
Leonnnn2020的博客
07-08 2292
vue3中获取ref元素的几种方式
el-select 下拉框有值却无法选中
梨子社区
05-31 770
在el-select加入@change事件，进行强制渲染，这样就可以完成下拉框的选择。
vue el-select 2个下拉框联动时产生的无法选中值的bug
lianxueliushi的博客
07-23 2259
el-select 2个下拉框联动时产生的无法选中值的bug解决办法
el-table，el-form在vue中封装组件化，含操作按钮和插槽.pdf
12-16
在给定的文件中，展示了如何利用Element UI库来封装`el-table`和`el-form`组件，这两个组件在管理系统的界面中非常常见，特别是用于数据展示和表单提交。 首先，我们关注`el-form`组件的封装。`el-form`用于创建...
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
10-16
el-autocomplete组件支持`@select`事件，当用户选择下拉列表中的某一项时，会触发这个事件。我们可以在对应的`handleSelect`方法中实现自动填充逻辑： ```javascript handleSelect(item) { this.form.name = item....
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
在Vue.js框架中，Element-UI是一个非常流行的UI组件库，它提供了丰富的界面元素和功能，使得开发者可以快速构建美观的后台管理系统。本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，...
解决element-ui的下拉框Select 选择器有值却无法选中的问题
weixin_34007906的博客
06-20 1448
今天就碰到编辑下拉选框带多选功能的问题,选框的值改变了,但是选框视图不更新!弄了好久也没有找到答案,百度一下找到了!问题描述： 在使用Vue框架和element-ui开发时，下拉框遇见一个问题，在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值，也就是下拉框值无法选中。（踩坑踩得莫名其妙）代码段： <el-select v-model="val...
vue element el-select选中不了
小米粒的博客
12-17 5319
问题： 描述： el-select选中不了 方法也触发不了，部分el-input也不可以 使用情景：table列表点击编辑，将数据回显在 Dialog对话框里，然后进行修改 但是发现选不了，部分input也不能进行编辑内容 解决：分成两步： 1.查看你绑定的v-model的属性有没有在data里面定义： 查看data数据（是否将typeID定义） 来康康这...
vue3中弹框中的el-select下拉组件显示value而不显示label
kanno的博客
10-20 2455
vue3中弹框中的el-select下拉组件显示value而不显示label
vue3表单项的输入和选择有时失效
m0_37755267的博客
08-11 380
vue3表单项的输入和选择有时失效
ant-design-vue设置select选择器选中状态不起效
Halo333的博客
05-11 4357
使用ant-design-vue从后端加载数据，然后初始化设置select选择器为选中状态，但是不起作用 首先查看你是不是加了 label-in-value 这个属性 <a-select style="width: 100%" placeholder="请选择资源组" label-in-value v-decorator="['resourceGroup', { rules: [{ required: true, message: '请选择资源组' }] }]">
vue3 element Plus el-form里的el-select选不中值
qq_34465166的博客
09-13 789
<el-formref="form":model="searchForm" :rules="rules":inline='true'> form表单中，如果ref和model同名会导致下拉框选中的值选不中
Vue3 element-plus el-select 无法选中，又不报错
m0_37616866的博客
04-26 2906
Vue3 中el-select 下拉框 使用的坑
element-plus + VUE3 项目 build 之后 el-select无法选中
陈熙之的博客
05-19 873
这个项目在运行npm run dev，一切正常，但是build之后，所有el-select无法选中。项目里的el-select是被我单独封装了一个组件。 最后才发现是在data里定义的时候，没有定义对象的属性。 之前在vue2.0中，一直偷懒，data定义弹窗加载的对象都是直接定义的一个空对象，后面axios加载数据赋值后直接就能读取绑定上。 最后改成这样，build之后正常了。 也许因为没有定义对象的属性，不属于响应式对象，也许更多的原因，可能是因为封装的组件还不够完美，能觉得
element el-select下拉框选择失效
敲代码无敌小奶龙的博客
01-11 6311
element el-select下拉框选择失效
vue3 el-form中使用循环li li中包含el-select下拉框
05-23
可以使用`v-for`指令循环生成`<el-form-item>`组件，然后在每个`<el-form-item>`中包含一个`<el-select>`下拉框组件即可。示例如下： ``` <el-form> <el-form-item v-for="(item, index) in options" :key="index" :label="item.label"> <el-select v-model="item.value" placeholder="请选择"> <el-option v-for="(option, optionIndex) in item.options" :key="optionIndex" :label="option.label" :value="option.value"></el-option> </el-select> </el-form-item> </el-form> <script> export default { data() { return { options: [ { label: '选项一', value: '', options: [ { label: '选项一-1', value: '1-1' }, { label: '选项一-2', value: '1-2' } ] }, { label: '选项二', value: '', options: [ { label: '选项二-1', value: '2-1' }, { label: '选项二-2', value: '2-2' } ] } ] } } } </script> ``` 在上述代码中，`options`数组包含了需要生成下拉框的数据，使用`v-for`指令循环生成`<el-form-item>`组件，并在每个组件中使用`<el-select>`下拉框组件，通过`v-model`指令绑定选中的值，使用`<el-option>`组件循环生成下拉框的选项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值