如何在成功axios发布请求后重置表单数据

Question

我有使用Alpine js和axios为POST请求制作的modalform组件。但我不能理解一些事情：

1. 如何在POST请求成功后重置表单数据。我在控制台TypeError: this.resetFields is not a function中看到错误

2. 如果POST请求由于422状态代码的验证错误而失败，如何获取错误以向用户显示这些错误。我想将errors.message绑定到AlpineJs的变量errors，然后使用<p x-text="errors" class="text-red-600"></p>在网页上显示它，但this.errors = error.message;似乎不起作用，因为在AlpineJs中，Chrome中的devtools错误变量不会改变。

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.log(response);
this.resetFields();
this.message = response.data.name;
})
.catch(function (error) {
console.log(error);
this.errors = error.message;
});
},
}
}
```

Answer 1

您有一个作用域问题。如果使用旧的function(response){...}样式，则this指的是调用它的对象(axios(。但是，如果将其替换为箭头函数，那么this将引用第一个非箭头函数对象，在本例中为Alpine.js组件。

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