Formularze - v-model dla Danych Misji

v-model to dwukierunkowe wiązanie danych - jak przepływ informacji między panelem sterowania a systemem komputera misji.

Podstawy v-model

1<template>
2  <div class="mission-form" style="background: #0a0e27; color: #00ff88;">
3    <!-- Text input -->
4    <input v-model="crewName" placeholder="Nazwa załogi" style="background: #1a1e37; color: #00ff88;" />
5    <p>Załoga: {{ crewName }}</p>
6
7    <!-- Textarea -->
8    <textarea v-model="missionNotes" placeholder="Notatki misji" style="background: #1a1e37; color: #00ff88;"></textarea>
9    <p>Notatki: {{ missionNotes }}</p>
10
11    <!-- Checkbox - boolean -->
12    <label style="color: #00ff88;">
13      <input type="checkbox" v-model="isAutomated" />
14      Automatyczny tryb
15    </label>
16    <p>Automatyczny: {{ isAutomated }}</p>
17
18    <!-- Checkbox - array -->
19    <label style="color: #00ff88;">
20      <input type="checkbox" v-model="activeSystems" value="oxygen" />
21      Generator tlenu
22    </label>
23    <label style="color: #00ff88;">
24      <input type="checkbox" v-model="activeSystems" value="water" />
25      Recykler wody
26    </label>
27    <p>Aktywne systemy: {{ 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>Tryb mocy: {{ powerMode }}</p>
39
40    <!-- Select -->
41    <select v-model="selectedModule" style="background: #1a1e37; color: #00ff88;">
42      <option disabled value="">Wybierz moduł</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>Moduł: {{ 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>