vue的el-select绑定的值无法选中el-option问题及解决

目录 el-select绑定的值无法选中el-option问题 vue el-select 2个下拉框联动时产生的无法选中值的bug 问题描述

el-select绑定的值无法选中el-option问题

框架vue-element-ui中的select绑定值v-model无法自动选中option的问题

代码如下：

<template>
?<el-select v-model="formData.colorId" placeholder="选择">
? ?<el-option
? ? ?v-for="item in colorOptions"
? ? ?:key="item.id"
? ? ?:label="item.name"
? ? ?:value="item.id">
? ?</el-option>
?</el-select>
<template>

<script>
colors = {
?"1": "黄",
?"2": "红",
?"3": "绿"
}
export default {
? data() {
? ?? ?return {
? ?? ??? ?formData:{ colorId: 2 },
? ?? ??? ?colorOptions: obj2Array(colors)
?? ?}
? }
}
function obj2Array(obj){
? const arr = []
? for(let key in obj){
? ? arr.push({id:key, name: obj[key]})
? }
? return arr
}
</script>

发现无法自动选中红色，而是直接显示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事件

? ? ? ? <el-select v-model="form.specialtyid" @change="specChange">
? ? ? ? ? ? <el-option
? ? ? ? ? ? ? v-for="item in specialtyList"
? ? ? ? ? ? ? :label="item.orgname"
? ? ? ? ? ? ? :key="item.orgid"
? ? ? ? ? ? ? :value="item.orgid"
? ? ? ? ? ? ></el-option>
? ? ? ? </el-select>
? ??
? ? ? ? specChange () {
? ? ? ? ? //强制刷新
? ? ? ? ? this.$forceUpdate()
? ? ? ? },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。 

查看更多关于vue的el-select绑定的值无法选中el-option问题及解决的详细内容...