Project: Mission Control System

Final project of the Control Simulator! Build a complete form and event system for space mission control at NOVA LAB station.

Module Summary

In this module you learned the key interaction mechanisms in Vue.js, which are the foundation of every web application:

• Event handling - directives

  @click

  ,

  @input

  ,

  @submit

  ,

  @keydown

  and other DOM events that allow reacting to user actions in real time
• Event modifiers -

  .prevent

  (blocking default action),

  .stop

  (stopping propagation),

  .once

  (one-time call),

  .self

  (only on target element) - precise control of event behavior
• v-model - two-way data binding in forms that automatically synchronizes data between the template and component state
• v-model modifiers -

  .lazy

  (update on blur),

  .number

  (automatic number conversion),

  .trim

  (whitespace removal) - customizing binding behavior
• Advanced forms - checkboxes, radio buttons, selects, textarea and other controls that connect with Vue's reactive data

Each of these mechanisms corresponds to a control system at NOVA LAB station - events are buttons on the control panel, v-model is two-way communication with sensors, and modifiers are signal filters ensuring precision.

Project Requirements

Build a Mission Registration Panel - a complete interface for planning Martian expeditions that includes:

1. Mission data form

Create an extensive form with fields: mission name (text input), destination (select with options: Olympus Mons, Valles Marineris, Polar Cap, Jezero Crater), priority (radio: low/medium/high/critical), estimated duration (number input in days), mission description (textarea), and safety regulations consent (checkbox). Each field should be bound to reactive state via v-model.

2. v-model modifiers

Use

.trim

on text fields (mission name, description) to automatically remove unnecessary spaces. Apply

.number

on the duration field so the value is always a number. Use

.lazy

on the mission description field so the update happens only after leaving the field - this reduces the number of re-renders.

3. Form validation

Implement real-time validation: mission name minimum 3 characters, description minimum 20 characters, duration between 1 and 365 days, required safety regulations consent. Display error messages under each field. The submit button should be disabled when the form is invalid.

4. Event handling and summary

Add

@submit.prevent

on the form, Escape key handling (

@keydown.escape

) to clear the form with confirmation (

confirm()

), and display a summary of the registered mission after form submission. Also add a history of registered missions displayed below the form.

Expand the starter below!