format volba

src/App.vue

@@ -7,17 +7,22 @@
                 <div v-for="(kniha, i) in knihy" :key="i">
                     {{ kniha.nazev }}
                     <button
-            v-on:click="kniha.typ_volba = typ.nazev"
+                        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}"
+                            '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">
@@ -37,6 +42,12 @@ export default {
             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",