košík

src/App.vue

@@ -6,6 +6,7 @@
                 <h2>Knihy</h2>
                 <div v-for="(kniha, i) in knihy" :key="i">
                     {{ kniha.nazev }}
+                    <img :src="kniha.obrazek" style="width: 30px" alt="">
                     <button
                         v-on:click="typKniha(kniha, typ)"
                         class="btn"
@@ -23,10 +24,19 @@
                     <p>
                         {{ kniha.format_volba }}
                     </p>
+                    <p>
+                        <button v-on:click="kosik.push(kniha)">do košíku</button>
+                    </p>
                 </div>
             </div>
             <div class="col">
                 <h2>Košík</h2>
+                <div v-for="(kniha, i) in kosik" :key="i">
+                    {{ kniha.nazev }} <br>
+                    {{ kniha.format_volba }} <br>
+                    <input type="number" min="1" v-model="kniha.pocet">
+                    {{ kniha.pocet * kniha.cena }} Kč
+                </div>
             </div>
         </div>
     </div>
@@ -40,6 +50,7 @@ export default {
     data: function () {
         return {
             knihy: data,
+            kosik: [],
         };
     },
     methods: {

src/assets/knihy.json

@@ -4,9 +4,10 @@
         "obrazek": "/img/telo-scita-rany.png",
         "autor": "",
         "stran": 0,
-        "cena": 0,
+        "cena": 122,
         "typ_volba": null,
         "format_volba": null,
+        "pocet": 1,
         "typy": [
             {
                 "nazev": "papír",