slider + seznam

snidane/src/App.vue

@@ -1,13 +1,22 @@
 <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>
 
 <script>
@@ -32,9 +41,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: 5,
+        },
+        {
+          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>
 
@@ -43,7 +83,12 @@ export default {
     display: inline-block;
     border: 1px solid gray;
     width: 15em; 
-    margin-right: 1em;
+    margin-right: 10px;
+    
+  }
+  .menu:hover{
+    cursor: pointer;
+    border-color:cornflowerblue;
   }
   .menu img{
     width: 100%;
@@ -52,4 +97,8 @@ export default {
   .menu p {
     text-align: center;
   }
+  .menu-wrap{
+    width: 30%;
+    overflow-x: scroll;
+  }
 </style>