Laravel项目中Vue配合Axios使用e.preventDefault失效问题咨询

问题核心和e变量的作用域无关，本质是axios是异步IO操作：调用axios.get()之后，浏览器不会等接口返回结果再执行后续逻辑，会直接走完checkAvailability函数，触发默认的表单提交行为。等接口请求完成进入then回调时，表单早已提交完毕，此时再调用e.preventDefault()完全不生效。

• 先放开被注释的e.preventDefault()，所有场景下先阻止表单默认提交行为，整体提交流程交给自己控制
• 在axios的回调中判断校验结果，如果校验通过（错误数组为空），手动触发表单提交即可

checkAvailability(e){
    // 所有场景先阻止默认表单提交
    e.preventDefault();
    let date = document.getElementById('date').value;
    let errorList = document.getElementById('errors');
    // 提前获取表单DOM，建议给form标签加ref="bookingForm"属性
    const submitForm = this.$refs.bookingForm;

    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
        }
    })
    // 用箭头函数保留Vue实例的this指向
    .then((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 {
            // 校验通过，手动提交表单
            submitForm.submit();
        }
    })
    .catch(function(error){
        console.log(error);
    });
}

内容的提问来源于stack exchange，提问作者Pieter