I am currently in the process of creating multiple forms and I need to verify if all input fields are filled out or not. Since I am utilizing data binding with the model, I am not using the value attribute. This means that when attempting to iterate through all fields, it will show empty values.
Is there a solution to this issue?
// template segment
<form v-for="questions in data">
<div v-for="question in questions">
<input type="text" v-model="forms[question.id]"/>
</div>
</form>
// JavaScript code
document.querySelectorAll('form').forEach(form => {
form.querySelectorAll("input").forEach(input => {
console.log(input.value);// this will display as empty
// Additional logic needs to be implemented here to notify user if any inputs are left empty
})
})