使用Vue框架和element-ui开发时,在el-select下拉框遇见的问题,改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值,也就是下拉框值无法选中。有人说写个change事件就好了,然而并没有什么卵用,但是change事件需要留着。
话不多说,直接干货。
出现这个问题就是绑定了对象(需求如此),render函数没有自动更新,数据刷新了,但是视图没有刷新,而this.$set
和this.$forceUpdate
就是重新render
。
解决办法:
1.通过this.$set()
解决
businessTypeChange(item){
~~**this.$set(this.form.customs.businessType)**~~
console.log(item);
},
注意,修改this.$set()的使用方法
对this.$set()方法进行了多次尝试,发现存在bug
正确的写法应该是:
businessTypeChange(item){
this.$set(this.form.customs,'businessType',item)
console.log(item);
},向this.$set() 里传入3个参数:
第一个是包裹字段的父级对象
第二个是目标字段
第三个是将要赋值给目标字段的数据
2.通过this.$forceUpdate()
解决
businessTypeChange(item){
this.$forceUpdate();
console.log(item);
},