vue里面的el-select绑定默认值方式
更新时间：2022年09月02日 10:26:01 作者：真狠白的小白
这篇文章主要介绍了vue里面的el-select绑定默认值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
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实现数字变换动画的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
今天小编就为大家分享一篇Vuejs+vue-router打包+Nginx配置的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue子组件通过.sync修饰符修改props属性方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
Vue3动态路由(响应式带参数的路由)变更页面不刷新的问题解决办法
问题来源是因为我的开源项目Maple-Boot项目的网站前端,因为项目主打的内容发布展示,所以其中的内容列表页会根据不同的菜单进行渲染不同的路由,本文降介绍Vue3动态路由变更页面不刷新的问题解决办法,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了Vue开发环境跨域访问问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-01
本篇文章主要介绍了vue2组件实现懒加载浅析,运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力.2017-03-03
这篇文章主要介绍了vue中eslintrc.js配置最详细介绍，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要为大家详细介绍了Vant Uploader实现上传一张或多张图片组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
ResizeObserver loop limit exceeded报错原因及解决方案
这篇文章主要给大家介绍了关于ResizeObserver loop limit exceeded报错原因及解决的相关资料,公司项目监听系统中发现一个高频错误ResizeObserver loop limit exceeded,而浏览器的console中却没有提示,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了Vue 嵌套路由使用总结,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-01
最新评论