|
|
@ -1,42 +1,44 @@ |
|
|
|
<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="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"> |
|
|
|
<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, |
|
|
|
}; |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|