问题描述:
编辑信息页面,栏目类型,使用下拉框,el-select标签,数据是通过调用后端接口,后端从数据库读取,然后赋值给前端变量。
点击下拉框出现下拉框列表,选中其中一项后列表关闭了,但是下拉框显示的还是原来的值,不会实时将改变体现在页面上。
也就是说,select选中改变不了视图。值已经被修改了,但视图不变。
解决方法:
在el-select添加一个change事件处理方法强制刷新:
@change="selectChange"
methods:{
selectChange(){
this.$forceUpdate();
}
}
结束!
vm.$forceUpdate()
示例:
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。
对象更改检测注意事项
还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除