如何设置Vue中el-select组件的默认选中项绑定？

本文共计336个文字，预计阅读时间需要2分钟。

目录 + Vue的el-select绑定默认值 + el-select绑定的值无法选中El-option问题 + Vue的el-select绑定默认值 + Vue + select下拉框绑定默认值： + 首先option要加value值，以便v-model可以获取到对应的选项值 + 一、当没有默认选中

目录

• vue的el-select绑定默认值
• el-select绑定的值无法选中el-option问题

vue的el-select绑定默认值

vue select下拉框绑定默认值：

首先option要加value值，以便v-model可以获取到对应选择的值

一、当没有绑定v-model，直接给对应的option加selected属性

二、当给select绑定了v-model的值的时候，要给v-model绑定的data值里写默认值

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 }

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