改一下模板就好了,比如这样,其成因及解决方案见点击链接 博客:注册登录要点击两次终极解决方案
<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>
改一下模板就好了,比如这样,其成因及解决方案见点击链接 博客:注册登录要点击两次终极解决方案
<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>
我也遇到这个问题了。在前一章就出现错误了。问题出在 register
的 nextTick
。
按照前一章的说明,实例的 $nextTick
方法用于在下次 DOM 更新循环结束之后执行延迟回调。在我们的代码里,当我们点击注册按钮后,表单验证指令有为按钮添加一个 canSubmit
的属性,但 DOM 没有立即更新,所以我们需在 $nextTick
的延迟回调里,获取更新后的元素属性,此时的 canSubmit
才是正确的值。在validator.js的 inserted
中给注册按钮添加了 click
事件,执行 submitHandler
后 canSubmit
才是正确的值。但是实际的执行顺序是先 register
后 submitHandler
,所以要点两次。是bug,但我没找到解决方法。
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。继续查看是哪个改变造成的。
@showcj 原因是vue的nextTick重新写过了。原先的逻辑是addEventListener中的方法比nextTick中的先执行,现在是nextTick的比addEventListener先执行。不知道是有意为知还是意外的bug。
我详细阅读了浅析 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了。
改一下模板就好了,比如这样,其成因及解决方案见点击链接 博客:注册登录要点击两次终极解决方案
<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>
推荐文章: