typ knihy

src/App.vue

@@ -4,8 +4,20 @@
     <div class="row">
       <div class="col">
         <h2>Knihy</h2>
-        <div v-for="kniha, i in knihy" :key="i">
+        <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>
       </div>
       <div class="col">
@@ -16,18 +28,17 @@
 </template>
 
 <script>
-import data from "./assets/knihy.json"
+import data from "./assets/knihy.json";
 
 export default {
-  name: 'App',
-  data: function() {
+  name: "App",
+  data: function () {
     return {
       knihy: data,
-    }
+    };
   },
-}
+};
 </script>
 
 <style>
-
 </style>

src/assets/knihy.json

@@ -5,6 +5,7 @@
         "autor": "",
         "stran": 0,
         "cena": 0,
+        "typ_volba": null,
         "typy": [
             {
                 "nazev": "papír",
@@ -17,8 +18,5 @@
                 "formaty": "pdf mobi"
             }
         ]
-    },
-    {
-        "nazev": "Hardcore historie"
     }
 ]