【Vue】form表单提交第二次才有反应是怎么回事

比如一个登录的场景,一般都是将使用form表单进行提交的,例如:

你可能会遇到点击第二次提交后才有反应,让我们来分析下原因。在进行第一次点击按钮前,我的url是这样的:

在进行了第一次点击按钮后,默认事件会给我自动提交到action属性中指定的地址,当然我这里并没有指定,所以它给我提交到了我当前页面的地址。浏览器在收到响应后进行了页面的刷新操作。导致我的登录逻辑还没来得及走就刷掉了。然后我的地址就变成了这样:

发现没,多了一个问号。也就是说理应拼接上参数的,但因为我的input中没有指定name属性,因此这里没有显示对应的参数。重点来了,当我进行第二次点击的时候,它触发了提交事件,但是没有进行提交的逻辑,也就是说它没向我当前页面的地址进行提交了,这是因为当参数值没有发生改变时(我没有指定name属性的关系,属性一直不变),它不会进行提交的操作。这个时候它没有触发一个默认的提交事件逻辑,但我可是有一个登录逻辑写在提交事件里的。所以第二次点击按钮时,我的登录逻辑能正常走进去了。

在知道原因后问题就好解决了,只要禁止默认的一个提交事件就好了,如:

猜你喜欢

转载自blog.csdn.net/qq_38238956/article/details/135006418
今日推荐