Как сбросить данные формы после успешного почтового запроса axios

У меня есть модальный компонент, созданный с использованием Alpine js и axios для запроса POST. Но я не могу понять несколько вещей:

  1. Как сбросить данные формы после успешного запроса POST. Я вижу ошибку в консоли TypeError: this.resetFields is not a function

  2. Как получить ошибки, чтобы показать их пользователю, если запрос POST не удался из-за ошибок проверки с кодом состояния 422. Я хочу связать error.message с переменными ошибками AlpineJs, а затем показать их на веб-странице с помощью <p x-text = "errors" class = "text-red-600"></p>, но this.errors = error.message;, похоже, не работает, потому что в AlpineJS devtools в переменной ошибок Chrome не изменяется.

        function modalform() {
            return {
                mailTooltip: false,
                instagramTooltip: false,
                openModal: false,

                formData: {
                  name: '',
                  phone: '',
                  email: '',
                  address: '',
                  message: '',
                  _token: '{{ csrf_token() }}'
                },

                message: '',
                errors: '',
                loading: false,
                sent: false,
                buttonLabel: 'Send',

                resetFields() {
                        this.formData.name = '',
                        this.formData.phone = '',
                        this.formData.email = '',
                        this.formData.address = '',
                        this.formData.message = ''
                },
                
                submitData() {
                    this.buttonLabel = 'Sending...';
                    this.loading = true;
                    this.message = '';

                    axios.post('/modalform', this.formData)
                    .then(function (response) {
                        console.info(response);
                        this.resetFields();
                        this.message = response.data.name;
                    })
                    .catch(function (error) {
                        console.info(error);
                        this.errors = error.message;
                    });

                },
            }
        }
```
JS - События опций формы
JS - События опций формы
В продолжение предыдущей статьи CSS - стили, связанные с вводом формы , в этой статье мы будем использовать JS для взаимодействия с формами, на этот...
CSS - Стили, связанные с вводом формы
CSS - Стили, связанные с вводом формы
Общими стилями ввода для форм являются Input (включая Text, Radio, checkbox), Select и Textarea, из которых Input относительно прост, поэтому в этой...
Создание многостраничной формы заявления о приеме на работу с помощью Angular
Создание многостраничной формы заявления о приеме на работу с помощью Angular
Наличие на корпоративном сайте форм заявлений о приеме на работу, или "трудовых анкет", экономит время и деньги как для соискателей, так и для...
0
0
22
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

У вас проблема с областью действия. Если вы используете старый стиль function(response){...}, то this относится к объекту, для которого он был вызван (аксиос). Однако если вы замените его функцией стрелки, то this будет ссылаться на первый объект функции, не являющийся стрелкой, в данном случае: на компонент Alpine.js.

axios.post('/modalform', this.formData)
.then((response) => {
    console.info(response);
    this.resetFields();
    this.message = response.data.name;
})
.catch((error) => {
    console.info(error);
    this.errors = error.message;
});

Еще один вопрос. Я обрабатываю данные POST с проверкой Laravel, и в случае прохождения проверки я возвращаю return response()->json([ 'status' => 'success', 'messageHeader' => 'Your message sent!', 'messageContent' => 'We will contact you soon.' ]); И это ответное сообщение я могу получить this.responseData = response.data;, чтобы проинформировать пользователя. Но если валидация не удалась this.errorData = error; просто выдает мне текст Error: Request failed with status code 422 и я не понимаю в чем причина неудачи. Но в Chrome devtools на вкладке сети я вижу реальную ошибку - слишком много символов и т. д.

schel4ok 05.04.2022 11:49

На основе эта тема подробности ошибки проверки должны быть в свойстве error.response.data.

Dauros 05.04.2022 13:12

Большое спасибо! Это абсолютно правильно.

schel4ok 08.04.2022 18:50

Другие вопросы по теме