验证码错误,不提示

按照教程走到图片验证码的时候,图片验证码错误不提示

验证码错误,不提示
代码截图:

验证码错误,不提示

打印的错误信息是正确的,但 this.$set 没有触发视图更新

天尽头流浪
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
最佳答案

@921t
提示语显示出来了,初步解决。
1、按你的方法,调换顺序;
2、加一个 [],成为[err.response.data.message]

如图:

file

file

调换顺序的问题,还有疑惑,按你说的 当 this.$set 方法在 this.getCaptchaCode() 之前调用时,this.errors 内的数据会因为 getCaptchaCode() 方法内的 this.errors = {} 这行代码而重置,所以会没有数据,你这里的重置仅仅是 storage 重置,并不会重置视图,而 this.$set() 会更新视图,即使 getCaptchaCode() 方法内的 this.errors = {} 重置了,也不会影响视图展示吧?
参考:cn.vuejs.org/v2/api/#Vue-set
示例:blog.csdn.net/kirinlau/article/det...

3年前 评论
taoyes3 3年前
d1270469522 (作者) (楼主) 3年前
讨论数量: 8

@liyu001989 图片验证码问题,输入错误的验证码,返回「验证码错误」提示语,打印日志没有问题,但是在页面不显示

3年前 评论

把异常中的代码顺序调换下试试

catch (e) {
  this.getCaptchaCode()
  this.$set(this.errors, 'captchaValue', e.response.data.message)
}
3年前 评论

@921t 无论是教程的顺序,还是改成你说的顺序,错误提示都有问题,当不填写的时候,错误提示没有问题。 按照教程,不显示任何内容,如图:

file

file

按你说的,调换顺序,只显示一个字,如图:

file

file

两种方式,不填写的时候,错误提示没有任何问题,如图:

file

换顺序的意义,没明白

3年前 评论

@d1270469522

  • 只显示一个字这个问题,还需要修改 template 中的内容,如图

    file

  • 换顺序的意义,个人理解为:

    this.$set 方法在 this.getCaptchaCode() 之前调用时,this.errors 内的数据会因为 getCaptchaCode() 方法内的 this.errors = {} 这行代码而重置,所以会没有数据 file

    因本人前端技术有限,理解仅供参考

3年前 评论

@921t
提示语显示出来了,初步解决。
1、按你的方法,调换顺序;
2、加一个 [],成为[err.response.data.message]

如图:

file

file

调换顺序的问题,还有疑惑,按你说的 当 this.$set 方法在 this.getCaptchaCode() 之前调用时,this.errors 内的数据会因为 getCaptchaCode() 方法内的 this.errors = {} 这行代码而重置,所以会没有数据,你这里的重置仅仅是 storage 重置,并不会重置视图,而 this.$set() 会更新视图,即使 getCaptchaCode() 方法内的 this.errors = {} 重置了,也不会影响视图展示吧?
参考:cn.vuejs.org/v2/api/#Vue-set
示例:blog.csdn.net/kirinlau/article/det...

3年前 评论
taoyes3 3年前
d1270469522 (作者) (楼主) 3年前

验证码本来就一个设置大小写不敏感才对啊~

1年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!