英文:
Vue form @submit.prevent does not work in mobile browsers
问题
<template>
<div class="login">
<h1>登录</h1>
<form class="login-form" @submit.prevent="login()" id="form">
<label for="email">邮箱</label>
<input type="email" name="email" id="email" v-model="email" />
<label for="password">密码</label>
<input type="password" name="password" id="password" v-model="password" />
<button type="submit" id="submit">登录</button>
</form>
</div>
</template>
<script setup lang="ts">
const email = ref("");
const password = ref("");
async function login() {
// 登录逻辑
}
</script>
<style lang="scss" scoped>
</style>
英文:
I have a Vue 3 component (a Nuxt 3 environment) with just a simple form which I am trying to prevent the default behavior of reloading the page. As many times in other Vue projects I am using @submit.prevent on the form element which works as expected on desktop. However, to my big surprise this does not work in neither iOS (Safari/Chrome) nor Android (Chrome). On mobile when either pressing the button or pressing 'Enter/Return' the page reloads. I have tried everything, for example tried manually calling event.preventDefault() and calling @submit.prevent.stop but with no success.
Below is the component code:
<template>
<div class="login">
<h1>Log in</h1>
<form class="login-form" @submit.prevent="login()" id="form">
<label for="email">Email</label>
<input type="email" name="email" id="email" v-model="email" />
<label for="password">Password</label>
<input type="password" name="password" id="password" v-model="password" />
<button type="submit" id="submit">Log in</button>
</form>
</div>
</template>
<script setup lang="ts">
const email = ref("");
const password = ref("");
async function login() {
// Login logic
}
</script>
<style lang="scss" scoped>
</style>
If anyone has any insight into this please share, and thank you in advance.
答案1
得分: 3
如果您的应用程序包很大，请确保页面在尝试点击登录之前已完全加载完成。我可以在 JavaScript 还在加载时重现您的问题，因为 @submit.prevent 在 JavaScript 完全加载和运行之前不会被评估。但一旦页面完全加载，将覆盖默认的 HTML 行为。
这可能是为什么您无法重现 jjj 的演示和其他人也无法重现您的问题的原因之一。
英文:
If your application bundle is large, make sure the page has finished loading fully before you try clicking login. I can reproduce your issue while the JavaScript is still loading because the @submit.prevent is not evaluated till the JavaScript has finished loading and running. But once the page fully loads the default HTML behavior is overridden.
This is possibly why you're unable to reproduce the issue with jjj's playground demo and others are unable to reproduce your issue either.
答案2
得分: 1
尝试过使用 stop 来阻止 stopPropagation 吗？
我发现在某些情况下我会使用 @submit.prevent.stop=""。
我不确定为什么在某些情况下仅使用 preventDefault 不足够。
它应该阻止页面重新加载，也许是浏览器的错误，可能是由插件引起的，可能是一种嵌套的原始事件在嵌套的函数调用中传播的方式，此时 stop 可以...停止它...
英文:
Have your tried stop for stopPropergation.
If find myself doing @submit.prevent.stop="" in some cases.
I'm not sure why preventDefault is not enough on it's own in some cases.
It should stop a page reload, perhaps it's a browser bug, maybe it's caused by a plugin, could be some form of nested relaying of original event bubbling up in nested function calls in which case stop would... well stop it...
答案3
得分: 0
更新：问题已解决，这是由于与数据库服务器通信时出现了错误。它尝试在手机上获取本地主机，但实际应该是192.168.1.190地址。对于以后阅读此信息的人，请尝试查看是否有任何错误导致了此问题，感谢 @asdofindia 的提示！
英文:
Update: Solved my issue, it was due to an error with communicating with the database server. It tried to fetch that at localhost on the phone, but it should have been the 192.168.1.190 address instead. For future people reading this try to see if any errors are causing this problem, thank you @asdofindia for the tip!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论