You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1.1 KiB
49 lines
1.1 KiB
<template>
|
|
<div class="kontakty">
|
|
<h1>Kontakty</h1>
|
|
<h2>Komponenty a Props</h2>
|
|
|
|
<contact-card jmeno="Jan Novák" :vek="18" trida="CEO"/>
|
|
<contact-card jmeno="Zuzana Svobodová" :vek="19" trida="Finanční kancelář"/>
|
|
<contact-card jmeno="Petr Dvořák" :vek="18" trida="Dělník"/>
|
|
|
|
<h2>v-for s komponentami</h2>
|
|
<contact-card
|
|
v-for="(kontakt, index) in kontakty"
|
|
:key="index"
|
|
:jmeno="kontakt.jmeno"
|
|
:vek="kontakt.vek"
|
|
:trida="kontakt.trida"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ContactCard from '@/components/ContactCard.vue';
|
|
|
|
export default{
|
|
name:"ContactView",
|
|
components:{
|
|
ContactCard
|
|
},
|
|
data(){
|
|
return{
|
|
kontakty:[
|
|
{jmeno:"Marie Nováková", vek:17, trida:"Brigadník"},
|
|
{jmeno:"Pavel Bourák", vek:25, trida:"Řidič kamiónu"},
|
|
{jmeno:"Lucie Bernardová", vek:23, trida:"Zástupkyně"},
|
|
]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.kontakty{
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding:20px;
|
|
text-align: center;
|
|
}
|
|
|
|
</style>
|