ElementUI下拉框选择后不显示值
问题:vue(ElementUI)下拉框选择后赋值了,但是框上不显示vue 无法监听动态新增的属性的变化,需要用 $set 来为这些属性赋值解决:<!--下拉框--><el-form-item label="用户角色" prop="role"><el-select v-model="editObject.role" :placeholder="selectPlaceh
·
- 问题: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, '')
}
}
更多推荐
已为社区贡献5条内容
所有评论(0)