En mi proyecto Laravel, he creado un método en mi instancia de Vue para verificar la disponibilidad de recursos en el envío del formulario. Estoy comprobando la disponibilidad con una llamada AJAX usando axios. Cuando uno o más recursos no están disponibles, obtengo una matriz con mensajes de error como respuesta. En consecuencia, quiero evitar que mi formulario se envíe usando e.preventDefault(). Sin embargo, esto no está funcionando y me pregunto por qué.
Cuando uso e.preventDefault() fuera de mi solicitud de axios, se impide que se envíe el formulario. Entonces, ¿supongo que debo extender el alcance de la 'variable e'? Entonces, ¿cómo puedo hacer esto?
Este es mi código:
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(); }No puede llamar a e.preventDefault() dentro de una promesa y esperar que funcione. En el momento en que se llame, el comportamiento predeterminado ya habrá ocurrido, ya que una promesa volverá en algún momento en el futuro (async).
Deberá llamar a Prevent Default tan pronto como se envíe el formulario y luego enviarlo condicionalmente usted mismo. Vea a continuación un ejemplo básico.
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); }); }