如何在成功的 axios post 请求后重置表单数据

Question

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

如何在成功 POST 请求后重置表单数据。我在控制台 TypeError: this.resetFields is not a function
中看到错误
如果 POST 请求因 422 状态代码的验证错误而失败，如何获取错误以向用户显示这些错误。我想将 errors.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.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 将引用第一个 non-arrow 函数对象，在本例中为：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;
});

如何在成功的 axios post 请求后重置表单数据

how to reset form data after successfull axios post request

forms

validation

post

axios

alpine.js