注册页面跳转问题

我发现在最后这个效果,这个“注册”的按钮,要点击两下才能跳转,第一次不能跳转,好奇怪,有谁知道是为什么吗?

讨论数量: 10

我也遇到这个问题了。在前一章就出现错误了。问题出在 registernextTick
按照前一章的说明,实例的 $nextTick 方法用于在下次 DOM 更新循环结束之后执行延迟回调。在我们的代码里,当我们点击注册按钮后,表单验证指令有为按钮添加一个 canSubmit 的属性,但 DOM 没有立即更新,所以我们需在 $nextTick 的延迟回调里,获取更新后的元素属性,此时的 canSubmit 才是正确的值。在validator.js的 inserted 中给注册按钮添加了 click 事件,执行 submitHandlercanSubmit 才是正确的值。但是实际的执行顺序是先 registersubmitHandler ,所以要点两次。是bug,但我没找到解决方法。

3个月前

我也遇到了这个问题~

3个月前

Github上可以找到作者的工程[vuejs-essential](https://github.com/RyunPu/vuejs-essential),是没有bug的。买家秀和卖家秀的区别 :smirk: 。我试着把我的工程的node_modules、package-lock.json、package.json删掉,用作者的package-lock.json、package.json替换,重新运行就可以了。不知道vue还是依赖的库底层做了什么修改。一定要把package-lock.json一起替换,不然还是有bug,应该是很微小的改变造成这种严重的bug。继续查看是哪个改变造成的。

3个月前

同样碰到这个问题,有知道原因的吗?

2个月前

@showcj 原因是vue的nextTick重新写过了。原先的逻辑是addEventListener中的方法比nextTick中的先执行,现在是nextTick的比addEventListener先执行。不知道是有意为知还是意外的bug。

2个月前

@LinQingmo 是vue版本问题吗?哪个版本是可以的?

2个月前

@showcj 是的。2.5.16是可以的。2.6不行。可以看看这篇文章浅析 Vue 2.6 中的 nextTick 方法

2个月前

我详细阅读了浅析 Vue 2.6 中的 nextTick 方法
2.4和2.6的 nextTick 是 MicroTask 实现的,2.5的 nextTick 是 MacroTask + MicroTask 实现的。2.5使用 MacroTask 本来是为了解决类似此处的bug,MacroTask 事件将在 nextTick 前面执行,而 MicroTask 事件在 nextTick 后执行。这两种策略各有对应的bug,Vue 选择重新使用 MicroTask 是因为 MacroTask 带来的问题比解决的 bug 更麻烦吧。这里只想去找workaround了。

2个月前
pardon110

我用的是vue最新版2.6.10,nextTick的问题解决了。问题的关键在于使用登录或注册方法,也隐式调用了验证指令中绑定的点击事件处理逻辑,而nextTick回调函数块内,有依赖该处理逻辑的代码 canSubmit在vue2.6.10中nextTick回调是在该事件逻辑触发之前调用。所以,只要延迟nextTick回调函数体内的代码在事件逻辑调用之后执行,就不需要点击两次了。方法超级简单,用setTimeout建个宏任务(目的让点击事件逻辑先执行),代码如下

register(e) {
      this.$nextTick(() => {
        setTimeout(() => {
          const target = e.target.type === "submit" ? e.target : e.target.parentElement;
          if (target.canSubmit) {
            this.submit();
          }
        });
      });
    }
1个月前

@pardon110 虽说不知道原理,但是测试了你的方法亲测有效

1周前

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!

社区文档:

API 查阅、风格指南、示例、Cookbook 等
部署你的 Vue.js 或者前端开发者环境