目录Vue的el-select绑定默认值el-select绑定的值无法选中el-option问题vue的el-select绑定默认值 vue select下拉框绑定默认值: 首先op
vue select下拉框绑定默认值:
首先option要加value值,以便v-model可以获取到对应选择的值
一、当没有绑定v-model,直接给对应的option加selected属性
二、当给select绑定了v-model的值的时候,要给v-model绑定的data值里写默认值
框架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
}
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue里面的el-select绑定默认值方式
本文链接: https://lsjlt.com/news/166649.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0