e.preventDefault 在带有 Vue JS 的 Axios 中不起作用答案

【问题标题】：e.preventDefault not working in Axios with Vue JSe.preventDefault 在带有 Vue JS 的 Axios 中不起作用
【发布时间】：2021-08-28 11:53:47
【问题描述】：

在我的 Laravel 项目中，我在我的 Vue 实例中创建了一个方法来检查表单提交时资源的可用性。我正在使用 axios 检查 AJAX 调用的可用性。当一个或多个资源不可用时，我会得到一个包含错误消息的数组作为响应。因此，我想通过使用 e.preventDefault() 来阻止我的表单提交。尽管如此，这不起作用，我想知道为什么。

当我在我的 axios 请求之外使用 e.preventDefault() 时，表单被阻止提交。所以我想我必须扩展'e变量'的范围？那么我该怎么做呢？

这是我的代码：

checkAvailability(e){
            let date = document.getElementById('date').value;
            let errorList = document.getElementById('errors');

            date = date.split('-').reverse().join('-');

            axios.get('/materials/check-availability', {
                params: {
                    date: date,
                    time: this.time,
                    ek: this.ekNumber,
                    dk: this.dkNumber,
                    ck: this.ckNumber,
                    zv: this.zvNumber,
                    ton: this.tonNumber
                }
            })
            .then(function(response) {
                let errors = response.data;

                if(errors.length > 0)
                {
                    e.preventDefault();
                    
                    errorList.innerHTML = '';

                    for(let i = 0; i < errors.length; i++)
                    {
                        let li = document.createElement('li');

                        li.innerText = errors[i];

                        errorList.appendChild(li);
                    }

                    errorModal.show();
                }
            })
            .catch(function(error){
                console.log(error);
            });

            // e.preventDefault();
        }

【问题讨论】：

你不能。 preventDefault 应该被同步使用或根本不使用，并且您有异步代码。摆脱 HTML 提交事件并以编程方式进行。
将e.preventDefault() 放在顶部并尝试一下。但是，如果您想根据无法正常工作的异步响应有条件地调用 e.preventDefault()
如果这是一个表单提交，您可以始终阻止默认，然后在.then中适用时以编程方式提交表单（即使用 axios）

标签： javascript forms vue.js axios

【解决方案1】：

您不能在 Promise 中调用 e.preventDefault() 并期望它起作用。到它被调用时，默认行为已经发生，因为承诺将在未来的某个时间返回（异步）。

您需要在提交表单后立即调用 prevent default ，然后自己有条件地提交表单。请参阅下面的基本示例。

checkAvailability(e){
        e.preventDefault();

        let date = document.getElementById('date').value;
        let errorList = document.getElementById('errors');
        const yourForm = document.querySelector('form');

        date = date.split('-').reverse().join('-');

        axios.get('/materials/check-availability', {
            params: {
                date: date,
                time: this.time,
                ek: this.ekNumber,
                dk: this.dkNumber,
                ck: this.ckNumber,
                zv: this.zvNumber,
                ton: this.tonNumber
            }
        })
        .then(function(response) {
            let errors = response.data;

            if(errors.length > 0)
            {
                
                errorList.innerHTML = '';

                for(let i = 0; i < errors.length; i++)
                {
                    let li = document.createElement('li');

                    li.innerText = errors[i];

                    errorList.appendChild(li);
                }

                errorModal.show();
            } else {
                yourForm.submit();
            {

        })
        .catch(function(error){
            console.log(error);
        });
    }

【讨论】：