slider + seznam

src/App.vue

@@ -1,13 +1,20 @@
 <template>
   <div>
     <h1>Snídaně</h1>
-    <div v-for="obj, i in menu" :key="i" class="menu">
-      <img :src="obj.obrazek" alt="">
-      <p>
-        {{ obj.popisek }}, {{ obj.cena }} Kč
-      </p>
+    <div class="menu-wrap">
+      <div :style="{width: sirka + 'px'}">
+        <div v-on:click="seznam.push(obj)" v-for="obj, i in menu" :key="i" class="menu">
+          <img :src="obj.obrazek" alt="">
+          <p>
+            {{ obj.popisek }}, {{ obj.cena }} Kč
+          </p>
+        </div>
+      </div>
     </div>
     
+    <div v-for="obj, i in seznam" :key="i">
+      {{ obj.popisek }}
+    </div>
     
   </div>
 </template>
@@ -35,9 +42,40 @@ export default {
           popisek: "Máslo",
           cena: 40,
         },
+        {
+          obrazek: "/img/med.jpg",
+          popisek: "Med",
+          cena: 20,
+        },
+        {
+          obrazek: "/img/mleko.png",
+          popisek: "Mléko",
+          cena: 9,
+        },
+        {
+          obrazek: "/img/rohlik.jpg",
+          popisek: "Rohlík",
+          cena: 6.50,
+        },
+        {
+          obrazek: "/img/salam.jpg",
+          popisek: "Salám",
+          cena: 12,
+        },
+        {
+          obrazek: "/img/vejce-na-tvrdo.jpg",
+          popisek: "Vejce na tvrdo",
+          cena: 55,
+        },
       ],
+      seznam: [],
     }
-  }
+  },
+  computed: {
+    sirka: function() {
+      return this.menu.length * 240 + this.menu.length * 10 + this.menu.length * 2
+    },
+  },
 }
 </script>
 
@@ -46,7 +84,14 @@ export default {
     display: inline-block;
     width: 15em;
     border: 1px solid gray;
-    margin-right: 1em;
+    margin-right: 10px;
+    
+  }
+
+  .menu:hover {
+    cursor: pointer;
+    border-color: cornflowerblue;
+    
   }
 
   .menu img {
@@ -56,4 +101,10 @@ export default {
   .menu p {
     text-align: center;
   }
+
+  .menu-wrap {
+    margin: 0 auto;
+    width: 50%;
+    overflow-x: scroll;
+  }
 </style>