Forms - v-model for Mission Data

v-model is two-way data binding - like the flow of information between the control panel and the mission computer system.

v-model Basics

1<template>
2  <div class="mission-form" style="background: #0a0e27; color: #00ff88;">
3    <!-- Text input -->
4    <input v-model="crewName" placeholder="Crew name" style="background: #1a1e37; color: #00ff88;" />
5    <p>Crew: {{ crewName }}</p>
6
7    <!-- Textarea -->
8    <textarea v-model="missionNotes" placeholder="Mission notes" style="background: #1a1e37; color: #00ff88;"></textarea>
9    <p>Notes: {{ missionNotes }}</p>
10
11    <!-- Checkbox - boolean -->
12    <label style="color: #00ff88;">
13      <input type="checkbox" v-model="isAutomated" />
14      Automatic mode
15    </label>
16    <p>Automatic: {{ isAutomated }}</p>
17
18    <!-- Checkbox - array -->
19    <label style="color: #00ff88;">
20      <input type="checkbox" v-model="activeSystems" value="oxygen" />
21      Oxygen generator
22    </label>
23    <label style="color: #00ff88;">
24      <input type="checkbox" v-model="activeSystems" value="water" />
25      Water recycler
26    </label>
27    <p>Active systems: {{ activeSystems }}</p>
28
29    <!-- Radio -->
30    <label style="color: #00ff88;">
31      <input type="radio" v-model="powerMode" value="eco" />
32      Eco
33    </label>
34    <label style="color: #00ff88;">
35      <input type="radio" v-model="powerMode" value="performance" />
36      Performance
37    </label>
38    <p>Power mode: {{ powerMode }}</p>
39
40    <!-- Select -->
41    <select v-model="selectedModule" style="background: #1a1e37; color: #00ff88;">
42      <option disabled value="">Select module</option>
43      <option value="alpha">Oxygen Alpha</option>
44      <option value="beta">Plasma Beta</option>
45      <option value="gamma">Water Gamma</option>
46    </select>
47    <p>Module: {{ selectedModule }}</p>
48  </div>
49</template>
50
51<script setup>
52import { ref } from 'vue'
53
54const crewName = ref('')
55const missionNotes = ref('')
56const isAutomated = ref(false)
57const activeSystems = ref([])
58const powerMode = ref('')
59const selectedModule = ref('')
60</script>