您现在的位置是：网站首页> 编程资料编程资料
vue的el-select绑定的值无法选中el-option问题及解决_vue.js_
2023-05-24
326人已围观
简介 vue的el-select绑定的值无法选中el-option问题及解决_vue.js_
el-select绑定的值无法选中el-option问题
框架vue-element-ui中的select绑定值v-model无法自动选中option的问题
代码如下：
发现无法自动选中红色，而是直接显示2，这是什么问题呢。
原来是obj2Array这个方法的问题，在重构为数组时，key是字符直接给到id，而colorId是数值，所以无法匹配。
正解：
function obj2Array(obj){ const arr = [] for(let key in obj){ arr.push({id:Number(key), name: obj[key]}) } return arr } vue el-select 2个下拉框联动时产生的无法选中值的bug
问题描述
做项目时用了2个el-select下拉框，一个下拉框选择学校，一个下拉框选择专业，专业的数据源是根据学校的选择来动态改变的，由于后台没有写成树的形式，所以写了2个下拉框进行联动。
这里就有一个问题：学校改变后，虽然专业的数据源发生了变化，但是原来的专业绑定值并没有清空，所以我在此就手动清空了专业的值。
这是就有了这个奇怪的问题，学校改变后，原来的专业绑定值虽然清空了，但是却无法选中了。
解决办法1：使用 this.$set 来设置变量的值，让视图重新render
在学校的值改变时，清空原专业值时用$set()，而不是直接赋值为空。
schoolChange (value) { // this.form.specialtyid='' this.$set(this.form, 'specialtyid', '') if (!value) { this.specialtyList = [] } else { this.GetspecialtynList(value) } },解决办法2：直接声明specialtyid变量
另一种解决办法，就是将specialtyid的值，直接写到data里，el-select绑定值也直接使用specialtyid,而不是使用form.specialtyid，此时再清空specialtyid的值就可以直接赋值了
解决办法3：给专业的el-select添加@change事件
specChange () { //强制刷新 this.$forceUpdate() },
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
相关内容
- vue中的select绑定多个值_vue.js_
- vue框架通用化解决个性化文字换行问题实例详解_JavaScript_
- vue select组件绑定的值为数字类型遇到的问题_vue.js_
- vue实现下拉框筛选表格数据_vue.js_
- vue父组件调用子组件方法报错问题及解决_vue.js_
- vue electron实现无边框窗口示例详解_vue.js_
- Vue3 diff算法之双端diff算法详解_vue.js_
- 一文详解Vue3中简单diff算法的实现_vue.js_
- JS函数(普通函数,箭头函数)中this的指向问题详解_javascript技巧_
- 详解Vue路由传参的两种方式query和params_vue.js_
