У меня есть модальный компонент, созданный с использованием Alpine js и axios для запроса POST. Но я не могу понять несколько вещей:
Как сбросить данные формы после успешного запроса POST.
Я вижу ошибку в консоли TypeError: this.resetFields is not a function
Как получить ошибки, чтобы показать их пользователю, если запрос 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;
});
},
}
}
```
У вас проблема с областью действия. Если вы используете старый стиль 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;
});
На основе эта тема подробности ошибки проверки должны быть в свойстве error.response.data
.
Большое спасибо! Это абсолютно правильно.
Еще один вопрос. Я обрабатываю данные 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 на вкладке сети я вижу реальную ошибку - слишком много символов и т. д.