košík

jsconfig.json

@@ -0,0 +1,5 @@
+{
+    "include": [
+        "./src/**/*"
+    ]
+}

src/App.vue

@@ -12,10 +12,19 @@
       </div>
     </div>
     
-    <div v-for="obj, i in seznam" :key="i">
-      {{ obj.popisek }}
-    </div>
+    <p class="cena">
+      Celková cena: {{ cena }} Kč
+    </p>
+    <p>
+      <button v-on:click="seznam = []">vyprázdnit košík</button>
+    </p>
 
+    <div v-for="obj, i in seznam" :key="i" class="seznam-grid">
+      <div><img :src="obj.obrazek" alt=""></div>
+      <div>{{ obj.popisek }}</div>
+      <div>{{ obj.cena }},-</div>
+      <div><button>odebrat</button></div>
+    </div>
   </div>
 </template>
 
@@ -25,7 +34,6 @@ export default {
   name: 'App',
   data: () => {
     return {
-      stav: false,
       menu: [
         {
           obrazek: "/img/caj.jpg",
@@ -75,6 +83,15 @@ export default {
     sirka: function() {
       return this.menu.length * 240 + this.menu.length * 10 + this.menu.length * 2
     },
+    cena: function() {
+      let celkem = 0
+      for (let index = 0; index < this.seznam.length; index++) {
+        const element = this.seznam[index];
+        celkem += element.cena
+      }
+
+      return celkem
+    },
   },
 }
 </script>
@@ -107,4 +124,19 @@ export default {
     width: 50%;
     overflow-x: scroll;
   }
+
+  .seznam-grid {
+    width: 30%;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 2fr 3fr 1fr 1fr;
+  }
+
+  .seznam-grid div {
+    align-self: center;
+  }
+
+  .seznam-grid img {
+    width: 100%;
+  }
 </style>