elementui-slider 滑动时会重置为0的问题解决

问题描述：

首次打开有 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前端开发工程师！