zakladni funkcioanlita

src/App.vue

@@ -1,26 +1,80 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div id="app">
+    <h1>Snídaně</h1>
+    <ul class="menu">
+      <li v-on:click="objednavka.push(item)" v-for="item in menu.items" :key="item">
+        <img :src="item.img" :alt="item.title">
+        <span>{{ item.title }}, {{ item.price }} Kč</span>
+      </li>
+    </ul>
+
+    <h2 v-if="objednavka.length > 0">Objednávka</h2>
+    <p v-else>
+      Vyberte kliknutím na obrázek z menu.
+    </p>
+
+    <p v-if="objednavka.length > 0">
+      Celkový součet: {{ celkem }} Kč
+    </p>
+
+    <ul class="objednavka">
+      <li v-on:click="objednavka.splice(poradi, 1)" v-for="(item, poradi) in objednavka" :key="item">
+        <img :src="item.img" :alt="item.title">
+        <span>{{ item.title }}, {{ item.price }} Kč</span>
+      </li>
+    </ul>
+
+  </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import menuData from "./assets/data.json";
 
 export default {
-  name: 'App',
-  components: {
-    HelloWorld
+  data: function() {
+    return {
+      menu: menuData,
+      objednavka: []
+    }
+  },
+  computed: {
+    celkem: function() {
+      let suma = 0;
+      for (let index = 0; index < this.objednavka.length; index++) {
+        const e = this.objednavka[index];
+        suma += e.price;
+      }
+      return suma;
+    }
   }
 }
+
 </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;
-}
+  ul.menu {
+    list-style-type: none;
+    padding: 0;
+  }
+
+  ul.menu img {
+    width: 100px;
+  }
+
+  ul.menu li {
+    display: inline-block;
+    width: 100px;
+    border: 1px solid transparent;
+  }
+
+  ul.menu li:hover {
+    border-color: black;
+    cursor: pointer;
+  }
+
+  ul.objednavka img {
+    width: 40px;
+  }
+
+
 </style>

src/assets/data.json

@@ -0,0 +1,52 @@
+{
+    "items": [
+        {
+            "id": 1,
+            "title": "Rohlík",
+            "img": "/img/rohlik.jpg",
+            "price": 5
+        },
+        {
+            "id": 2,
+            "title": "Máslo",
+            "img": "/img/maslo.jpg",
+            "price": 15
+        },
+        {
+            "id": 3,
+            "title": "Med",
+            "img": "/img/med.jpg",
+            "price": 8
+        },
+        {
+            "id": 4,
+            "title": "Čaj",
+            "img": "/img/caj.jpg",
+            "price": 22
+        },
+        {
+            "id": 5,
+            "title": "Kukuřičné vločky",
+            "img": "/img/corn-flakes.jpg",
+            "price": 12
+        },
+        {
+            "id": 6,
+            "title": "Mléko",
+            "img": "/img/mleko.png",
+            "price": 6
+        },
+        {
+            "id": 7,
+            "title": "Salám",
+            "img": "/img/salam.jpg",
+            "price": 15
+        },
+        {
+            "id": 8,
+            "title": "Vejce na tvrdo",
+            "img": "/img/vejce-na-tvrdo.jpg",
+            "price": 24
+        }
+    ]
+}