vue的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绑定的值无法选中el-option问题的全部内容，更多相关vue内容请搜索靠谱客的其他文章。