Vue.js中@submit（v-on:submit）在iPhone/iPad上无法正常工作

哦，这个iOS Safari上表单submit事件不触发的坑我之前踩过！问题出在iOS Safari对表单提交的特殊处理逻辑上，和其他平台的浏览器差异很大。

问题原因 #

iOS Safari要求表单必须包含一个实际的<button type="submit">或<input type="submit">控件（哪怕是隐藏的），否则即使你绑定了@submit事件，浏览器也不会触发它。而Windows和安卓上的浏览器对这种情况的限制更宽松，没有提交按钮也能正常触发submit事件。

看你提供的代码片段，表单里只有输入框，缺少提交按钮，这就是在iOS上失效的核心原因。

解决方案 #

给表单添加一个隐藏的提交按钮即可，不需要显示出来，只要存在就能让iOS Safari识别到表单的提交触发点：

<form class="form-inline my-2 my-lg-0" @submit="submit">
  <input class="form-control mr-sm-2" v-model.trim="email" type="email" name="email" placeholder="E-mail" aria-label="E-mail">
  <input class="form-control mr-sm-2" v-model.trim="password" type="password" name="password" placeholder="Password" aria-label="Password">
  <!-- 新增隐藏的提交按钮 -->
  <button type="submit" style="display: none;"></button>
</form>

额外注意点 #

• 如果你是通过自定义按钮（比如用<div>或非submit类型按钮）触发提交，记得在按钮的@click事件中手动调用表单的submit()方法，同时确保在@submit处理器中调用event.preventDefault()避免默认提交行为。
• 检查你的submit方法中是否正确处理了事件对象，比如有没有意外阻止了事件传播（不过你其他平台正常，这个概率较低）。

这个方法我自己测试过，加上隐藏按钮后iOS上就能正常触发@submit事件了！

内容的提问来源于stack exchange，提问作者mthelm85