I am currently working on a project using Vue.js and Laravel where I have a data list named "questions." My goal is to iterate through this list and check if the answer value for each question is not null. If any question has a null answer, I want to prevent the form from submitting and notify the user to fill in all questions with an alert message.
However, I am facing an issue where even though some answers are still empty, the console logs 'success' when the function executes.
If anyone can help me identify where I went wrong with my approach, I would greatly appreciate it.
Here is the data list I am working with:
https://i.stack.imgur.com/1r7TH.png
As shown in the image, there are some null values in the answer fields that need to be filled out.
Below is the submit function that is linked to the form's submit button:
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');
}
})
})}
},
Thank you in advance!