Vue.js Assignment– 5

Forms & Data Handling

Basic Questions

  1. Create a login form using v-model and submit it to log the entered values in the console.
  2. Use v-model.trim on a text input and show the trimmed value under the field.
  3. Use v-model.number on a numeric input and display its type using typeof.
  4. Use v-model.lazy on an input and demonstrate that updates occur only on change.
  5. Build a form with text, email, and checkbox fields bound via v-model to a reactive object.
  6. Disable the submit button until all required fields have non-empty values.
  7. Create a custom validator that checks email format and shows an inline error message.
  8. Add per-field validation states (valid/invalid) with dynamic classes on blur.
  9. Render a list of dynamic inputs based on an array schema and bind each with v-model.
  10. Create a select dropdown with v-model and render the currently selected option.
  11. Build a simple file input that prints the selected file name on change.
  12. Preview an uploaded image by creating an object URL and displaying it in an <img>.
  13. Add a textarea with character counter and prevent submission when over a limit.
  14. Reset the entire form and validation state with a single “Reset” button.
  15. Submit the form and show a loading spinner for two seconds before confirming success.
  16. Use computed to derive a “form complete” summary from multiple inputs.
  17. Add a radio group using v-model and show the chosen value in the UI.
  18. Create a password field with a toggle to show/hide characters.
  19. Prevent default form submission and handle the submit in a Vue method.
  20. Persist form data to localStorage on input and repopulate the form on page load.

Intermediate Questions

  1. Install and configure Vuelidate in a component and validate required fields.
  2. Create Vuelidate rules for email, min length, and a custom async uniqueness check.
  3. Display a list of validation errors per field under each input.
  4. Disable submit until the entire Vuelidate form is $valid.
  5. Implement debounced validation for a username field to avoid excessive checks.
  6. Build a multi-step form (wizard) and preserve form state across steps.
  7. Implement navigation guards in the wizard to prevent moving forward with invalid data.
  8. Generate form inputs dynamically from a JSON schema and bind them with v-model.
  9. Create a dynamic array field (add/remove rows) where each row has two inputs bound to state.
  10. Add a date picker component and validate that the selected date is not in the past.
  11. Implement file size and file type validation for an uploaded image before preview.
  12. Handle multiple file uploads and render a gallery of image previews.
  13. Build a form that posts JSON to a REST API endpoint and renders the server response.
  14. Add error handling for the REST request and show a dismissible alert on failure.
  15. Implement optimistic UI updates on submit and roll back on REST failure.
  16. Create a GraphQL mutation to submit form data and display the returned ID.
  17. Load initial form options (selects) using a GraphQL query and handle loading/error states.
  18. Use watch to auto-save draft form data to localStorage every 2 seconds.
  19. Add a custom directive that auto-focuses the first invalid input on failed submit.
  20. Build a reusable <FormField> component that accepts label, modelValue, rules, and emits update:modelValue.

Advanced Questions

  1. Implement a large, schema-driven form renderer that supports input, textarea, select, checkbox, and file fields with per-field validation.
  2. Build a reusable validation composable (e.g., useValidation) that handles sync and async rules and returns errors, touched, and validate().
  3. Implement client-side chunked file uploads to a REST endpoint with progress bars per chunk.
  4. Add image processing before upload (resize or compress) and upload the processed blob.
  5. Integrate a GraphQL file upload mutation and display server-side validation messages.
  6. Create a multi-step form with route-based steps, preserving state via a store (Pinia) and validating per step.
  7. Implement accessibility features: ARIA attributes, error descriptions, and keyboard navigation for all controls.
  8. Add form-level and field-level async validation that cancels outdated requests when the user types.
  9. Build a robust error boundary around the form that captures and logs unexpected runtime errors while preserving user input.
  10. Final Hands-on Project:
    • Schema-driven, multi-step form with dynamic fields and conditional visibility
    • Vuelidate or custom composable validation (sync + async)
    • File uploads with previews, size/type checks, and resumable/chunked transfers
    • REST and GraphQL submission paths with optimistic updates and rollback
    • Auto-save drafts, storage persistence, and accessibility compliance
    • Reusable <FormField> components and a validation composable for large-scale reuse