手记编程网

vue中element-ui el-select动态修改不能正常工作

问题描述:

编辑信息页面,栏目类型,使用下拉框,el-select标签,数据是通过调用后端接口,后端从数据库读取,然后赋值给前端变量。

点击下拉框出现下拉框列表,选中其中一项后列表关闭了,但是下拉框显示的还是原来的值,不会实时将改变体现在页面上。

也就是说,select选中改变不了视图。值已经被修改了,但视图不变。

解决方法:

在el-select添加一个change事件处理方法强制刷新:

@change="selectChange"
methods:{
  selectChange(){
    this.$forceUpdate();
  }
}

结束!

vm.$forceUpdate()

示例

迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。

对象更改检测注意事项

还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除

最新文章