Surzhikov
@Surzhikov
Разработчик веб-приложений

Как правильнее запрограммировать поведение кнопки?

Добрый вечер.
Вникаю в Vue.

Фидл по вопросу: https://jsfiddle.net/3hoejbz0/

1) Есть форма для входа
2) Есть кнопка, которая при клике отправляет xhr запрос с логином-паролем (с помощью axios). Пока ждём запрос, кнопка должна поменять состояние на disabled, а вместо текста на кнопке - должен быть fa-спиннер.
3) Для тренировки сделал такой компонент button-freeze - чтобы можно было использовать в разных местах проекта, где так же будет использоваться xhr (правильное это решение?)
4) Как правильнее сделать вызов родительского метода и самое главное как правильнее вернуть кнопку в исходное состояние при завершении xhr запроса

Гуру, направьте на путь истинный
  • Вопрос задан
  • 73 просмотра
Пригласить эксперта
Ответы на вопрос 2
rak1996
@rak1996
Frontend developer
Используейте у кнопки тип submit, если хотите отправить форму при клике, а у самой формы слушайте событие @submit.prevent(так браузер выполнит валидацию) . prevent не даст браузеру выполнить событие по умолчанию(отправка гет запроса).

А в кнопке сделайте props loading и меняйте значение, перед отправкой формы, и после получения ответа от сервера
Ответ написан
muzikant777
@muzikant777
PHP/Vue разработчик
"Истинный" путь в моём понимании проходит через написание компонента-обёртки, который будет прозрачно проксировать входные параметры и обработчики событий до непосредственно самой кнопки.
Как это сделать достаточно хорошо описано тут: https://youtu.be/7lpemgMhi0k?t=1313
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы