konec

src/App.vue

@@ -2,17 +2,22 @@
 <div class="wraperr">
 <section>
   <u><h1>Kliknněte na hlínu a udělejte hroudu</h1></u>
-  <div v-for="obj, i in menu" :key="i" class="menu">
+  <h2>Celkový počet kilo: <div v-if="menu.length > 0" class="kg2"> {{kg2}} kg</div></h2>
+  <div v-on:click="presunHroudy(i)" v-for="obj, i in menu" :key="i" class="menu">
     <img :src="obj.obrazek" alt="">
     <p>
       {{obj.kg}}
     </p>
   </div>
 </section>
-<section><h1>1</h1></section>
+<section></section>
 <section>
   <u><h1>Zde se tvoří hrouda </h1></u>
-  <h2>Celkový počet kg:</h2>
+  <h2>Celkový počet kg:<div v-if="menu2.length > 0" class="kg">{{kg}}kg</div></h2>
+  <h2>Počet hroud:{{menu2.length}}</h2>
+  <div v-for="obj, i in menu2" :key="i" class="menu2">
+    <img :src="obj.obrazek" alt="">
+  </div>
 </section>
 </div>
 </template>
@@ -49,10 +54,36 @@ export default {
         popisek:"černá koule",
         kg: 28,
       }
-    ]
+    ],
+      menu2:[]
+    }
+  },
+  methods:{
+    presunHroudy: function(pozice){
+      this.menu2.push(this.menu[pozice])
+      this.menu.splice(pozice, 1)
+    }
+  },
+  computed:{
+    kg: function(){
+      let celkem = 0 
+      for (let i = 0; i < this.menu2.length; i++) {
+        const element = this.menu2[i];
+        celkem += element.kg
       }
+      return celkem
+    },
+     kg2: function(){
+      let celkem = 0 
+      for (let i = 0; i < this.menu.length; i++) {
+        const element = this.menu[i];
+        celkem += element.kg
       }
+      return celkem
+  },
 }
+}
+
 </script>
 
 <style>
@@ -63,5 +94,6 @@ export default {
 img{
   width: 20%;
   height: 20%;
+  cursor: pointer;
 }
 </style>