注册页面跳转问题

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

pardon110
最佳答案

改一下模板就好了,比如这样,其成因及解决方案见点击链接 博客:注册登录要点击两次终极方案

<span @click="register">
     <button type="submit" class="btn btn-lg btn-success btn-block">
        <i class="fa fa-btn fa-sign-in"></i>注册
      </button>
 </span>
5个月前 评论
讨论数量: 11

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

7个月前 评论

我也遇到了这个问题~

7个月前 评论

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。继续查看是哪个改变造成的。

7个月前 评论

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

6个月前 评论

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

6个月前 评论

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

6个月前 评论

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

6个月前 评论

我详细阅读了浅析 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了。

6个月前 评论
pardon110

改一下模板就好了,比如这样,其成因及解决方案见点击链接 博客:注册登录要点击两次终极方案

<span @click="register">
     <button type="submit" class="btn btn-lg btn-success btn-block">
        <i class="fa fa-btn fa-sign-in"></i>注册
      </button>
 </span>
5个月前 评论

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

4个月前 评论

@pardon110 你的方法亲测有效,虽然不明白原理;做第一遍时就发现了这问题,当时没有在意,只是为了尽快把案例跑通。

3周前 评论

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