Форма Vue @submit.prevent не работает в мобильных браузерах
У меня есть компонент Vue 3 (среда Nuxt 3) с простой формой, которую я пытаюсь предотвратить по умолчанию при перезагрузке страницы. Как и много раз в других проектах Vue, я использую @submit.prevent для элемента формы, который работает, как и ожидалось, на рабочем столе. Однако, к моему большому удивлению, это не работает ни в iOS (Safari/Chrome), ни в Android (Chrome). На мобильном устройстве при нажатии кнопки или нажатии «Ввод/возврат» страница перезагружается. Я пробовал все, например, пытался вручную вызвать event.preventDefault() и вызвать @submit.prevent.stop, но безуспешно.
Ниже приведен код компонента:
<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>
Если кто-то что-то знает по этому поводу, поделитесь, заранее спасибо.
@ReaganM Я использую Vite с npm run nuxt dev и IP-адресом локальной сети на порту 3000, в моем случае 192.168.1.190:3000. Проект немного больше, чем этот компонент, но я не думаю, что это должно как-то повлиять на это. Хотя я могу ошибаться, но я понятия не имею, где искать.
Я сделал то же самое с ios chrome, и он отлично работает для меня :)
@ReaganM Да, для меня это действительно странно. Я действительно не знаю, где отлаживать дальше
@RasmusLian быстрая демонстрация. работает на iOS 16. повезло? play.vuejs.org/#eNp1Ustu4zAM/BVCKNAE2cTpdVcxtscC/…
@jjj Эта демонстрация работает, как и ожидалось, без перезагрузки страницы
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Попробуйте stop для stopPropergation.
Если обнаружите, что делаю @submit.prevent.stop = "" в некоторых случаях.
Я не уверен, почему preventDefault в некоторых случаях недостаточно.
Это должно остановить перезагрузку страницы, возможно, это ошибка браузера, может быть, это вызвано плагином, может быть какая-то форма вложенной ретрансляции исходного события, всплывающего во вложенных вызовах функций, и в этом случае stop будет... ну остановите это...
Да, я пробовал это, к сожалению, без везения.
Если пакет вашего приложения большой, убедитесь, что страница полностью загрузилась, прежде чем пытаться нажать кнопку входа. Я могу воспроизвести вашу проблему, пока JavaScript все еще загружается, потому что @submit.prevent не оценивается до тех пор, пока JavaScript не завершит загрузку и выполнение. Но как только страница полностью загружается, поведение HTML по умолчанию переопределяется.
Возможно, поэтому вы не можете воспроизвести проблему с демонстрацией игровой площадки jjj, и другие также не могут воспроизвести вашу проблему.
Спасибо за это предложение, однако в моей ситуации это не так. Я пробовал ждать и все тот же результат.
Попробуйте подключить отладчик, чтобы вы могли увидеть консоль, если какая-либо ошибка JavaScript developer.chrome.com/docs/devtools/remote-debugging @RasmusLian
Отличный совет! Это помогло мне найти мою проблему, это было связано с ошибкой при извлечении данных из моей базы данных на локальном хосте, необходимо было изменить локальный хост на 192.168.1.190, чтобы он извлекался оттуда, а не на локальный хост телефона!
Обновление: моя проблема решена из-за ошибки связи с сервером базы данных. Он попытался получить это на локальном хосте по телефону, но вместо этого должен был быть адрес 192.168.1.190. Будущие люди, читающие это, постарайтесь выяснить, не вызывают ли какие-либо ошибки эту проблему, спасибо @asdofindia за подсказку!
Если конкретный ответ сыграл важную роль в ответе на вопрос, рекомендуемое действие состоит в том, чтобы предложить любые потенциальные улучшения этого ответа (при необходимости) и отметить его как правильный, а не публиковать совершенно новый ответ.
Могу я спросить, как вы тестируете его на мобильном телефоне? Я сделал тест, и он работает нормально.