Vue 将el-select值置空后出现无法选择问题分析

最新推荐文章于 2024-04-29 16:46:21 发布
最新推荐文章于 2024-04-29 16:46:21 发布
阅读量2.4k 收藏 4
点赞数 2
分类专栏： Vue常见问题 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/News777/article/details/127252751
版权
当在Vue应用中，通过监听第一个下拉框选择并过滤第二个下拉框选项时，遇到一个问题：将第二个下拉框值置空后，下拉框变为单项绑定，无法正常选择。在vue-devtool中能看到值的变化，但在界面上不显示。为解决此问题，尝试在第二个下拉框添加属性进行强制渲染，将`v-model`改为`:value`和`:modelValue`，成功避免了上述错误并确保表单校验正常。
摘要由CSDN通过智能技术生成

1. 需求分析

  • 需求
    两个下拉框，第一个下拉框选择不同选项后，第二个下拉框出现的值不同
  • 解决需求方法
    这里采用watch监听第一个下拉框选项，根据其值将第二个下拉框用filter进行过滤显示，若第二个下拉框存在值，则将其值做置空处理。
  • 出现问题
    第一个下拉框选择某些值后，发现第二个下拉框无法选择，变成了单项绑定，在vue-devtool中可以看到其值变化，但下拉框却不显示。

2. 解决办法

    1. 在第二个下拉框里加个属性@change="this.$forceUpdate()进行强制渲染。

    但采用这个方法后面发现，即便能选上值了，表单校验的提示无法消除，但可以保存成功，很奇怪。

    1. 在watch中将this.formData.value=''改为delete this.formData.value

    使用这个方法，目前没有再出现上述错误

    1. 用this.$set
News777
关注
专栏目录
订阅专栏
vue+element el-select 选项无法选择的问题
u014381566的博客
05-31 1万+
使用vue+element-ui开发时，在el-select下拉框遇到一个问题：状态字段在后台数据库是int类型，值为0或1，但是页面显示得为‘正常’或‘停用’。在新增的时候‘<el-select v-model="form.Isusing" @change="select_status" :placeholder="状态" class="handle-select mr10">’中显...
el-select 校验 取对象 赋值 置空
iSmilee的博客
12-07 1920
业务场景： 当前下拉框的选项和对象均被重置（选项置空），并且要得到选择的item的整个属性，不止id。 <el-select v-model="form.id" value-key="id" // 1 @change="handleChange" > <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item" // 2 /> &
vue 两个el-select联动 清空后无法点击选择后一个el-select
树上骑个猴的博客
01-07 2136
需求： 两个el-select联动，当第一个change的时候，清空第二个的值以及清空第二个的下拉框的数据源，但是清空之后发现，第二个el-select再也无法选择下拉数据，选择没有效果 解决方案1： 先判断再清空 async select1Change(id){ if (id) { this.formData.select2? this.formData.select2= '' : '' // 清空下拉框2的值 this.select2Data= []
Vue3 element-plus el-select 无法选中，又不报错
m0_37616866的博客
04-26 3073
Vue3 中el-select 下拉框 使用的坑
vue element的el-select下拉框赋值之后无法选择
weixin_62310280的博客
07-08 2132
vue element的el-select下拉框赋值之后无法选择
El-Select 下拉选择无反应 无法选择 Vue设置属性不触发响应
a571574085的博客
10-22 5733
this.dialog.forms ={ roomCode: ""}; 下拉选择才有反应 下拉选择时会触发 this.$emit('input', value); 进而触发ast生成的代码: callback: function($$v) { _vm.$set(_vm.dialog.forms, "roomCode", $$v)}, 为什么? 因为渲染时 createComponent->是v-model的话会触发transformModel->on[event].
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
在使用Vue.js框架结合Element-UI组件库开发应用时，el-select选择器是一个常用的组件，用于实现下拉列表选择的功能。然而，在使用过程中可能会遇到一些问题，比如选择器无法显示选中的内容。这个问题可能会让开发...
解决vue elementUI 使用el-select 时 change事件的触发问题
01-18
<el v-model=level size=mini placeholder=请选择 change=selectChange()> <el v-for=item key=item.value label=item.label value=item.value></el> </el> 我们需要的是选择之后才触发，但是这样写你会发现，页面...
Vue中el-form标签中的自定义el-select下拉框标签功能
10-15
`el-select` 是`el-form` 中常用的组件，用于创建下拉选择框，用户可以在预设的选项中进行选择。在某些场景下，我们可能需要自定义`el-select` 的下拉框标签，以满足特定的需求。本文将详细介绍如何在`el-form` 中...
el-select下拉框选中为空
牛逼的博客
09-23 2440
el-select下拉框选中为空 主要是缺少data <vxe-form-item title=“计算依据” :span=“8” #default="{ data }"> <el-select placeholder="" v-model=“cbDatas.jsyj” @change=“jsyjChange” clearable > vxe-option v-for=“dict in jsyjlist” :key=“dict.dictValue” :label=“dict.dic
elementUI的select切换单选和多选，报错Cannot read property value of undefined
qiuxinfa123的博客
05-26 2445
如题，在使用el-select时，发现切换单选和多选，会报错，单独使用是正常的，从多选切换到单选也是可以的，但是从单选切换到多选，就会报上述错误。 我是弹框里面要根据下拉来切换单选和多选的： <el-dialog :title="titleMap[currentType]" :visible.sync="dialogFormVisible" > <div style="width:80%;margin: 0 auto"&gt...
elementui的el-select下拉框 el-option无法选择、绑定的值无法选中
南北极之间
12-22 2684
方法： 在el-select中写一个@change事件
elementUI之el-select选择器赋值为空后无法选中回显
最新发布
weixin_42678822的博客
04-29 1260
【代码】elementUI之el-select选择器赋值为空后无法选中回显。
element-ui 中标签el-select选中无反应问题
爱coding的大尾巴的专栏
11-10 2698
el-select标签，如果外部还嵌套循环，点击选中标签无反应，删除也不好使， 原因由于层次太多，导致render函数没有自动更新； 在el-select标签内加入 @change="$forceUpdate()" ，强制刷新视图即可。 ...
el-select下拉框没有数据
qq_45327886的博客
03-21 1万+
el-select给options赋值后,下拉框无数据
element-ui el-input / el-select输入框的非空校验
热门推荐
lx233
12-17 1万+
一、之前写的实现 直接js判断就可以 .prevent .stop 是阻止继续冒泡 不一样的 见 官方说明 1https://cn.vuejs.org/v2/cookbook/form-validation.html#%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A0%A1%E9%AA%8C 2 自定义 （我没看）https://...
el-select下拉框选中的下标值为 0 时，提示未选择
欢迎小伙伴们的评论和私信，工作日基本都会上来看看的哈
04-06 1448
js中 0 和 " "的判断
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

News777

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

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

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

打赏作者

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

抵扣说明：

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

余额充值