Travel Types

src/App.vue

@@ -1,28 +1,38 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+<div id="app">
+  <h1>Letenka</h1>
+  <div class="wrapper">
+    <div class="col">
+    <h2>Parametry letu</h2>
+    <select v-model="travelType" >
+      <option value="" disabled>Vyberte z možností</option>
+      <option v-for="(option, index) in TravelTypes" :key="index" value="option">{{ option.text }}</option>
+    </select>
   </div>
+    <div class="col">
+      <h2>Objednávka</h2>
+      <p v-if="travelType">
+         Typ Letu: {{ travelType.text }}
+      </p>
+    </div>
+  </div>
+</div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
+export default{
+  name: "App",
+  data: function(){
+    return{
+      travelType:"",
+      TravelTypes:[
+        { value: "R", text: "Zpáteční"},
+        { value: "O", text: "Jednosměrný"},
+      ]
+    }
   }
 }
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
 </style>