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

2023-09-19 09:26:17

问题描述:

首次打开有 elementui-slider的页面,不管滑动哪个滑块,滑动时都会自动归0(划得动,但是会自动回到最左侧0的位置),但是他确实触发了change函数。

Untitled

问题排查

尝试了很多方法,包括将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前端开发工程师!

更多推荐

【C++】String类基本接口介绍及模拟实现(多看英文文档)

string目录如果你很赶时间,那么就直接看我本标题下的内容即可!!一、STL简介1.1什么是STL1.2STL版本1.3STL六大组件1.4STL重要性1.5如何学习STL二、什么是string??(本质上是一个类)三、string的类模板(什么?string居然利用了模板??)三、string的三种构造(拷贝构造也

批处理小程序的制作

一、介绍批处理是一种将一系列计算机任务按照预定义的顺序进行自动化处理的技术。它是通过批处理脚本或命令文件来实现的,可以在不需要人工干预的情况下,批量运行多个命令或程序。批处理脚本的优点1.自动化:批处理可以自动执行重复性任务,无需手动干预,减少人力和时间成本。2.批量处理:批处理可以同时处理多个任务,提高工作效率。3.

Kotlin 中的协程 flow

一、Flow概述Flow具有异步挂起suspend响应式编程,可以使用挂起函数来异步生产和消费事件,Flow的设计灵感也来源于响应式流以及其各种实现。二、Flow的生产和消费suspendfuntest1(){flow<Int>{(0..4).forEach{emit(it)//生产者发送数据}}.collect{pr

群晖linux ——设置短密码、免密码登录、多个群晖免密登录

文章目录概述群晖设置超短密码获取root权限设置新密码/更改密码群晖SSH公钥免密登录开启家目录修改文件夹权限修改配置文件上传公钥高级——多个群晖,不同密钥解决方法概述群晖仅在内网运行,外网无法访问。每次输入长密码不方便。但是群晖WEB端无法设置短密码,一番搜索过后,发现可以通过SSH的方式设计短密码。具体步骤如下。群

勒索病毒最新变种.Elbie勒索病毒来袭,如何恢复受感染的数据?

引言:随着数字化的快速发展,网络安全威胁也变得越来越严重。其中,.Elbie勒索病毒是一种备受恶意分子钟爱的危险工具,它可以加密您的数据文件,然后勒索高额赎金。本文将深入探讨.Elbie勒索病毒的威胁,包括其工作原理、如何恢复被其加密的数据文件,以及有效的预防措施,以保护您的数据免受损失。如果您在面对被勒索病毒攻击导致

Kettle REST Client获取token调用接口解析JSON入文件实战

KettleRESTClient通过GET获取token以POST方式请求接口解析JSON入文件完整实例需求说明通过kettle组件调用接口并解析JSON成结构化数据入文件。完整实例解决方法利用生成记录组件定义URL参数通过RESTClENT组件请求得到TOKEN通过JSONINPUT组件解析接口请求的结果通过JAVA

SOLIDWORKS2024新功能--SOLIDWORKS篇(三)

结构系统和焊件该章节包括以下主题:边角管理在文件属性中显示单位结构系统边角管理您可以手动或自动应用边角处理。要打开边角管理PropertyManager:打开一个零件,然后单击结构系统>主构件。创建主构件并退出结构系统模式。在PropertyManager中,指定一个选项:自动。将相似的边角分组并应用边角处理。手动。允

Tomcat

1常见的客户端/服务器架构模型1.1C/S架构(Client/ServerArchitecture)C/S架构(Client/ServerArchitecture)指的是客户端通过安装在本地的软件(客户端)访问服务器上的应用程序,客户端与服务端之间通过网络进行通信和数据交换。优点:快速响应:由于客户端软件安装在本地,可

干货 | 汽车行业研发效能提升的挑战与实践案例

在9月15日的第七届CSN大会上,思码逸研发效能专家王艳萍受邀分享了《汽车行业研发效能提升的挑战与实践案例》。演讲包含了思码逸对多家汽车企业服务过程中总结出的行业痛点、解决方案,以及实践案例。以下为演讲实录:思码逸与很多知名汽车企业都有合作。我们这次的演讲会先简单介绍一下思码逸,然后重点分享我们与汽车企业在研发效能层面

基于麒麟服务器V10的.NET部署、运行 + 金仓数据库

一言而论:基于麒麟服务器V10的.NET部署、运行,涉及的信创产品有麒麟、金仓,使用了.NET6API文章目录前言环境硬件环境软件环境麒麟安装.NET麒麟安装金仓数据库.NET与KES通讯麒麟部署.NET总结参考资料前言紧跟着笔者的上一篇文章《银河麒麟V10的使用》,这次笔者调研的内容是.NET在麒麟上的部署、人大金仓

Vue脚手架一站式搭建项目

一、什么是vue-cli1.1如果你只是简单写几个Vue的Demo程序,那么你不需要VueCLI脚手架。1.2.如果你在开发大型项目,那么你需要,并且必然需要使用VueCLI。1.2.1使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。1.2.1如果每个项目都要手动完

热文推荐