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

Question

[Андрей Суржиков]

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

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

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

Гуру, направьте на путь истинный

Answer 1

[Maxim Rak]

Используейте у кнопки тип submit, если хотите отправить форму при клике, а у самой формы слушайте событие @submit.prevent(так браузер выполнит валидацию) . prevent не даст браузеру выполнить событие по умолчанию(отправка гет запроса).

А в кнопке сделайте props loading и меняйте значение, перед отправкой формы, и после получения ответа от сервера

Answer 2

[Андрей Седышев]

"Истинный" путь в моём понимании проходит через написание компонента-обёртки, который будет прозрачно проксировать входные параметры и обработчики событий до непосредственно самой кнопки.
Как это сделать достаточно хорошо описано тут: https://youtu.be/7lpemgMhi0k?t=1313