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 }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
查看更多关于vue里面的el-select绑定默认值方式的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://www.haodehen.cn/did121226