format volba

src/App.vue

@@ -1,42 +1,53 @@
 <template>
-  <div>
-    <h1>Knihkupectví</h1>
-    <div class="row">
-      <div class="col">
-        <h2>Knihy</h2>
-        <div v-for="(kniha, i) in knihy" :key="i">
-          {{ kniha.nazev }}
-          <button
-            v-on:click="kniha.typ_volba = typ.nazev"
-            class="btn"
-            v-bind:class="{
-              'btn-success': kniha.typ_volba == typ.nazev, 
-              'btn-outline-secondary': kniha.typ_volba != typ.nazev}"
-            v-for="(typ, i) in kniha.typy"
-            :key="i"
-          >
-            <i class="fas" v-bind:class="typ.ikona"></i>
-            {{ typ.nazev }}
-          </button>
+    <div>
+        <h1>Knihkupectví</h1>
+        <div class="row">
+            <div class="col">
+                <h2>Knihy</h2>
+                <div v-for="(kniha, i) in knihy" :key="i">
+                    {{ kniha.nazev }}
+                    <button
+                        v-on:click="typKniha(kniha, typ)"
+                        class="btn"
+                        v-bind:class="{
+                            'btn-success': kniha.typ_volba == typ.nazev,
+                            'btn-outline-secondary':
+                                kniha.typ_volba != typ.nazev,
+                        }"
+                        v-for="(typ, i) in kniha.typy"
+                        :key="i"
+                    >
+                        <i class="fas" v-bind:class="typ.ikona"></i>
+                        {{ typ.nazev }}
+                    </button>
+                    <p>
+                        {{ kniha.format_volba }}
+                    </p>
+                </div>
+            </div>
+            <div class="col">
+                <h2>Košík</h2>
+            </div>
         </div>
-      </div>
-      <div class="col">
-        <h2>Košík</h2>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
 import data from "./assets/knihy.json";
 
 export default {
-  name: "App",
-  data: function () {
-    return {
-      knihy: data,
-    };
-  },
+    name: "App",
+    data: function () {
+        return {
+            knihy: data,
+        };
+    },
+    methods: {
+        typKniha: function(kniha, typ) {
+            kniha.typ_volba = typ.nazev
+            kniha.format_volba = typ.formaty
+        },
+    },
 };
 </script>
 

src/assets/knihy.json

@@ -6,6 +6,7 @@
         "stran": 0,
         "cena": 0,
         "typ_volba": null,
+        "format_volba": null,
         "typy": [
             {
                 "nazev": "papír",