vit.tlusty
4 years ago
2 changed files with 57 additions and 24 deletions
@ -1,30 +1,60 @@ |
|||||
<template> |
<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}} |
|
||||
|
<div> |
||||
|
<h1>Knihkupectví</h1> |
||||
|
<div class="row"> |
||||
|
<div class="col"> |
||||
|
<h2>Knihy</h2> |
||||
|
<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> |
||||
|
<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> |
||||
</div> |
</div> |
||||
</div> |
|
||||
</div> |
|
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import data from "./assets/knihy.json" |
|
||||
|
import data from "./assets/knihy.json"; |
||||
|
|
||||
export default { |
export default { |
||||
name: 'App', |
|
||||
data:function () { |
|
||||
return{ |
|
||||
|
name: "App", |
||||
|
data: function () { |
||||
|
return { |
||||
knihy: data, |
knihy: data, |
||||
} |
|
||||
|
kosik:[] |
||||
|
}; |
||||
}, |
}, |
||||
|
|
||||
} |
|
||||
|
methods: { |
||||
|
typKniha: function(kniha, typ) { |
||||
|
kniha.typ_volba = typ.nazev |
||||
|
kniha.format_volba = typ.format |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style> |
<style> |
||||
|
|
||||
</style> |
|
||||
|
</style> |
||||
Loading…
Reference in new issue