- 问题:vue(ElementUI)下拉框选择后赋值了,但是框上不显示
<!--下拉框--> <el-form-item label="用户角色" prop="role"> <el-select v-model="editModel.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>
- 解决:
方法一
下拉框数据是循环调用接口,数据层次太多,render函数没有自动更新,需手动强制刷新
// 手动刷新 handleChange() { this.$forceUpdate() }
方法二
vue 无法监听动态新增的属性的变化,需要用 $set 来为这些属性赋值
// 操作下拉框选中事件 handleChange(val) { // val 代表 value 值 if (val) { // 操作选中角色发生变化 this.$set(this.editModel, this.editModel.role, val) } else { this.$set(this.editModel, this.editModel.role, '') } }