Přílet + Odlet

src/App.vue

@@ -1,7 +1,43 @@
 <template>
   <div>
     <h1>Letenka</h1>
-    <select v-model="letiste"></select>
+
+    <div class="card" style="width: 18rem;">
+      <div class="card-body">
+        <h5 class="card-title">Vyhledejte si let</h5>
+
+        <div class="form-check">
+          <input v-model="typLetu" value="Z" class="form-check-input" type="radio" name="typLetu" id="typLetu1" checked>
+          <label class="form-check-label" for="typLetu1">
+            Zpáteční
+          </label>
+        </div>
+        <div class="form-check">
+          <input v-model="typLetu" value="J" class="form-check-input" type="radio" name="typLetu" id="typLetu2">
+          <label class="form-check-label" for="typLetu2">
+            Jednosměrná
+          </label>
+        </div>
+
+        <label for="letisteZ" class="form-label">Odkud</label>
+        <select v-model="letisteZ" id="letisteZ" class="form-select">
+          <option v-for="obj, i in letisteSeznam" :key="i" :value="obj.value">
+            {{ obj.text }}
+          </option>
+        </select>
+
+        <label for="letisteKam" class="form-label">Kam</label>
+        <select v-model="letisteKam" id="letisteKam" class="form-select">
+          <option v-for="obj, i in letisteSeznam" :key="i" :value="obj.value">
+            {{ obj.text }}
+          </option>
+        </select>
+
+        <button v-on:click="pocetOsob -= 1" class="btn btn-outline-primary">-</button>
+        {{ pocetOsob }}
+        <button v-on:click="pocetOsob += 1" class="btn btn-outline-primary">+</button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -10,11 +46,15 @@ export default {
   name: "App",
   data: () => {
     return {
-      letiste: [
-        "PRG, Prague - Letiště Václava Havla",
-        "PAR, Paris",
-        "DWC, Dubai, AL Mohamed",
+      letisteZ: "",
+      letisteKam: "",
+      letisteSeznam: [
+        {value: "PRG", text: "Prague - Letiště Václava Havla"},
+        {value: "PAR", text: "Paris"},
+        {value: "DWC", text: "Dubai, AL Mohamed"},
       ],
+      typLetu: "Z",
+      pocetOsob: 0,
     };
   },
 };