问题描述:
首次打开有 elementui-slider
的页面,不管滑动哪个滑块,滑动时都会自动归0(划得动,但是会自动回到最左侧0的位置),但是他确实触发了change
函数。
问题排查
尝试了很多方法,包括将slider的值设置为number
类型,虽然它本身就是number
,用了一个干净的变量,是可以的,但是从系统取出来的值给他赋初值就不行。
怀疑是不是因为有2个同名滑块(v-if
),但是用了v-if
是只会显示一个滑块,即使删除一个,问题依旧。
上网搜答案,可没有准确描述该问题的答案。自己做demo测试都是OK的。
只有一种情况是OK的,就是不给他赋初始值,而是保留在data中写的原始值或干脆不写。
问题解决
最终发现,原来是初始值没有被响应式的更新导致的。即data的数据没有响应式更新,因为用的是对象的键值对赋值,这个根据响应式原理,如果对象的某个属性要响应式赋值,应该要写成这样:
this.$set(this.form, 'key', value)
对比前后的代码:
原先:
this.form.debtReduceRate= Number(repaymentPlanList[0].debtReduceRate * 100);
现在:
this.$set(this.form, "debtReduceRate", Number(this.form.repaymentPlanList[0].debtReduceRate * 100));
问题解决了!果真是排查问题一小时,解决问题一分钟啊!
总结
这个根本就不是elementUI
的问题,而是自己没有考虑到这一点。
如果你在web前端开发、面试、前端学习路线有困难可以加我V:imqdcnn。免费答疑,行业深潜多年的技术牛人帮你解决bug。
祝你能成为一名优秀的WEB前端开发工程师!