The ExamEditor Vue component I am working on is quite complex, consisting of sub-components like QuestionEditor and ExerciseEditor. These components are all tied to an exam object that contains nested arrays with questions and more. The layout inside the exam editor looks something like this:
<QuestionEditor
v-for="(question, index) in exam.questions"
:id="'q-' + question.id"
:key="'q-' + question.id"
v-model="exam.questions[index]"
:category-choices="exam.questionCategories"
:errors="editorErrors.questionErrors[question.id]"
></QuestionEditor>
<!-- editors for exercises, etc. -->
To see the full component, you can check it out here.
I have been working on adding data validation to ensure only consistent "exams" can be saved. To handle this, I created a function to manage errors for different items within the editor as an object structure. Each type of item has its own key containing error messages based on their id.
While I initially thought of using a computed property to maintain sync between the data and errors, I encountered an issue where errors were always being displayed. For instance, upon adding a new question, errors would immediately appear even if I hadn't finished inputting the details.
My goal now is to display errors at appropriate times, perhaps triggering the function when a sub-component is clicked away from. This way, errors would only show up when needed, enhancing user experience. Do you have any suggestions on how to achieve this effectively?
Additionally, I'm open to feedback on the best practices for displaying errors in forms. Considering the complexity of my component and interface, simplicity is key. How do you prefer handling errors in your forms, especially in intricate setups like mine?