|
|
|
@ -4,8 +4,32 @@ |
|
|
|
<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 }} |
|
|
|
{{kniha.obrazek}} |
|
|
|
<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> |
|
|
|
<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}} |
|
|
|
<input type="number" min="1" v-model="kniha.pocet"> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -13,18 +37,24 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import data from "./assets/knihy.json" |
|
|
|
import data from "./assets/knihy.json"; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'App', |
|
|
|
name: "App", |
|
|
|
data: function () { |
|
|
|
return { |
|
|
|
knihy: data, |
|
|
|
} |
|
|
|
kosik:[] |
|
|
|
}; |
|
|
|
}, |
|
|
|
|
|
|
|
} |
|
|
|
methods: { |
|
|
|
typKniha: function(kniha, typ) { |
|
|
|
kniha.typ_volba = typ.nazev |
|
|
|
kniha.format_volba = typ.format |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
|
|
|
|
</style> |
vit.tlusty
4 years ago