Vue解决el-select下拉框选择值后框上不显示问题
问题描述
最近在做项目时用到了element-ui的el-select
下拉框,下拉框数据是通过接口异步获取的,当选择某一个值后,在绑定的change
事件中能够看到已赋值成功,但是框上却不显示选中的值。
解决思路
vue无法监听动态新增的属性的变化,需要用$set
来为这些属性赋值。
解决办法
// 下拉框 <el-form-item label="用户角色" prop="role"> <el-select v-model="editObject.role" :placeholder="selectPlaceholder" @change="handleChange"> <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id"> </el-option> </el-select> </el-form-item>
操作下拉框选中事件:
handleChange(val) { // val 代表 value 值 if (val) { // 操作选中角色发生变化 this.$set(this.editObject, this.editObject.role, val) } else { this.$set(this.editObject, this.editObject.role, '') } }
至此,完美解决el-select
下拉框选择值后框上不显示问题,希望对你有帮助。
声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » Vue解决el-select下拉框选择值后框上不显示问题
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » Vue解决el-select下拉框选择值后框上不显示问题