switch开关的async和await初体验

开发组件库时，遇到了一个坑，先看代码

methods:{handleClick(){this.$emit('input',!this.value)this.setColor()},

我在点击switch组件时，拿到value是true还是false，通过对value的值来给switch开关颜色，比如我给switch false时是红色，true时为绿色。但是出现了一个问题，就是第一次点击时，颜色都是红色，当第二轮点击时才切换颜色，并且正好与我设置的颜色相反 false为绿色，true为红色了。

这是因为当我们点击的时候会让value发生改变，但是我们还没有接收到value值就调用setColor方法了，所以我们需要处理异步，先拿到value的值再调用getColor方法

解决方法一

       handleClick(){this.$emit('input',!this.value)setTimeout(()=>{this.setColor()})   },

解决方法二

 async handleClick(){this.$emit('input',!this.value)await this.$nextTick()this.setColor()   },

这样写的意思是数据修改后等待dom更新，再修改按钮的颜色，如果不用 this.$nextTick()的话我们就把希望的颜色反过来。

switch开关的async和await初体验相关推荐

JS - 15 - 异步、Promise、async、await
Promise 类似 java 的 Callable then 方法类似 java 的 Future 下一篇: <JS - 16 - 任务调度.宏任务.微任务.轮询> PromiseA+ ...
python gevent async_python的异步初体验（gevent、async、await）
网络爬虫,这种io高密集型的应用由于大部分的时间在等待响应方面,所以CPU的使用率一直不高,速度也不快,为了解决这些问题,我们使用异步的方式来进行爬虫程序. 串行的时候,如果我们要爬一个网站,那么我们 ...
我的Go+语言初体验——（5）Go+ 基本语法之 Switch
我的Go+语言初体验--(5)Go+ 基本语法之 Switch "我的Go+语言初体验" | 征文活动进行中- Go+ 语言中提供多路分支条件语句 switch, 用于在不同条件下 ...
.NET WebSocket 核心原理初体验
上个月我写了<.NET gRPC核心功能初体验>, 里面使用gRPC双向流做了一个打乒乓球的Demo, [实时][双向]这两个标签是不是很熟悉,对, WebSockets也可以做实时双向通 ...
ASP.NET Core 3.0 上的gRPC服务模板初体验(多图)
早就听说ASP.NET Core 3.0中引入了gRPC的服务模板,正好趁着家里电脑刚做了新系统,然后装了VS2019的功夫来体验一把.同时记录体验的过程.如果你也想按照本文的步骤体验的话,那你得先安 ...
typescript在ES3(IE7)环境下使用async、await
因为公司产品需要搞个Web App,但是又需要兼容IE7,这时候整个应用会非常复杂,尤其是在处理异步的时候,在我的选择中有两个方案 callback方案 async/await 经过衡量以后,决定使用 ...
Polygon zkEVM的pil-stark Fibonacci状态机初体验
1. 引言前序博客: Polygon zkEVM 基本概念第5章 "一个例子--Fibonacci state machine" 实操主要见: 2022年8月8日Jordi B ...
.NET 6 之 ABP vNext 初体验
马上国庆了,dotNative 预祝大家假期愉快,Happy National Day! 本文将介绍在 .net6 平台的 asp.net core webapi 框架中,如何使用 abp vnext ...
小程序 html编辑器,小程序富文本编辑器editor初体验
终于,微信在5月9号的v2.7.0版本中新增了 editor富文本编辑器组件,今天有时间了准备体验一下在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还 ...

switch开关的async和await初体验

开发组件库时，遇到了一个坑，先看代码

这是因为当我们点击的时候会让value发生改变，但是我们还没有接收到value值就调用setColor方法了，所以我们需要处理异步，先拿到value的值再调用getColor方法

这样写的意思是数据修改后等待dom更新，再修改按钮的颜色，如果不用 this.$nextTick()的话我们就把希望的颜色反过来。

switch开关的async和await初体验相关推荐

最新文章

热门文章