Matěj Málek
3 years ago
2 changed files with 55 additions and 17 deletions
@ -1,26 +1,63 @@ |
|||||
<template> |
<template> |
||||
<img alt="Vue logo" src="./assets/logo.png"> |
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/> |
|
||||
|
<div> |
||||
|
<div class="card"> |
||||
|
<div class="card-header">Služby</div> |
||||
|
<div class="card-body"> |
||||
|
<div class="list-group list-group-flush"> |
||||
|
<a v-on:click="aktivniSluzba = sluzba" v-for="sluzba, i in sluzby" :key="i" href="#" class="list-group-item list-group-item-action">{{ sluzba.nazev }}</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div v-if="aktivniSluzba" class="card"> |
||||
|
<div class="card-header d-flex justify-content-between"> |
||||
|
<div>Možnosti - {{ aktivniSluzba.nazev }}</div> |
||||
|
<div><button v-on:click="aktivniSluzba = null" class="btn btn-sm btn-light">×</button></div> |
||||
|
</div> |
||||
|
<div class="card-body"> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import HelloWorld from './components/HelloWorld.vue' |
|
||||
|
|
||||
export default { |
export default { |
||||
name: 'App', |
|
||||
components: { |
|
||||
HelloWorld |
|
||||
} |
|
||||
} |
|
||||
|
name: "App", |
||||
|
data: function() { |
||||
|
return { |
||||
|
sluzby: [ |
||||
|
{ |
||||
|
nazev: "Posekání zahdrady", |
||||
|
akce: 1, |
||||
|
cenaMetr: 1.5, |
||||
|
}, |
||||
|
{ |
||||
|
nazev: "Vysázení stromu", |
||||
|
akce: 2, |
||||
|
stromy: [ |
||||
|
{nazev: "Bříza", cena: 49}, |
||||
|
{nazev: "Dub", cena: 89}, |
||||
|
{nazev: "Jasan", cena: 59}, |
||||
|
{nazev: "Topol", cena: 39}, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
nazev: "Čištění jezírka", |
||||
|
akce: 3, |
||||
|
cenaKubik: 22, |
||||
|
}, |
||||
|
{ |
||||
|
nazev: "Výstavba jezírka", |
||||
|
akce: 4, |
||||
|
cenaObjem: 250 |
||||
|
}, |
||||
|
], |
||||
|
aktivniSluzba: null, |
||||
|
}; |
||||
|
}, |
||||
|
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style> |
<style> |
||||
#app { |
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif; |
|
||||
-webkit-font-smoothing: antialiased; |
|
||||
-moz-osx-font-smoothing: grayscale; |
|
||||
text-align: center; |
|
||||
color: #2c3e50; |
|
||||
margin-top: 60px; |
|
||||
} |
|
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue