Estoy creando una aplicación Vuejs & Laravel y tengo una lista de datos llamada "preguntas" que estoy tratando de iterar y ver si el valor de respuesta dentro de la pregunta no es igual a nulo. Si incluso el valor de respuesta de una sola pregunta es nulo, quiero evitar que se envíe el formulario y usar una alerta para decirle al usuario que complete todas las preguntas.
El problema que tengo es que, aunque aún no se completaron todas las respuestas, aún obtengo un "éxito" registrado en la consola desde mi función.
¿Alguien puede señalar dónde me estoy equivocando con esto?
Esta es mi lista de datos:
Como puede ver, algunos de los campos de respuesta son nulos, mientras que si se completan, hay datos allí.
Y esta es mi función de envío que he vinculado a mi botón de envío de formulario:
methods: { submitPressed(e){ console.log(this.questions); this.questions.forEach(question => { question.questions.every(q => { if(q.answer !== null){ console.log('success'); // this.submit(); } else { e.preventDefault(); console.log('more to fill out'); } }) })} },
¡Gracias por adelantado!
Debe devolver un valor verdadero dentro de every
.
methods: { submitPressed(e){ this.questions.forEach(question => { const check = question.questions.every(q => { if (q.answer !== null) { return true; } else { return false; } }); if (check) { // every answer has been filled } else { // some answers are missing } }) } }
Puedes hacerlo de varias maneras diferentes. Una es usar some()
en la matriz.
methods: { submitPressed(e) { console.log(this.questions); if (this.questions.some(q => !q.answer)) { e.preventDefault(); console.log('more to fill out'); } else { console.log('success'); // this.submit(); } } },
Los detalles sobre more() se pueden encontrar en https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some