add props to the component
This commit is contained in:
parent
1b34a7753f
commit
b5207c1399
|
@ -1,9 +1,19 @@
|
||||||
<template>
|
<template>
|
||||||
<header><h1>My Friends</h1></header>
|
<div>
|
||||||
<ul>
|
<header><h1>My Friends</h1></header>
|
||||||
<friend-contact></friend-contact>
|
<ul>
|
||||||
<friend-contact></friend-contact>
|
<friend-contact
|
||||||
</ul>
|
name="Manuel Lorenz"
|
||||||
|
email-address="manuel@localhost.com"
|
||||||
|
phone-number="0123 4567 890"
|
||||||
|
></friend-contact>
|
||||||
|
<friend-contact
|
||||||
|
name="Julie Jones"
|
||||||
|
email-address="julie@localhost.com"
|
||||||
|
phone-number="0123 4567 890"
|
||||||
|
></friend-contact>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,25 +1,20 @@
|
||||||
<template>
|
<template>
|
||||||
<li>
|
<li>
|
||||||
<h2>{{ friend.name }}</h2>
|
<h2>{{ name }}</h2>
|
||||||
<button @click="toggleDetails()">{{ buttonDetailsText }}</button>
|
<button @click="toggleDetails()">{{ buttonDetailsText }}</button>
|
||||||
<ul v-if="detailsAreVisible">
|
<ul v-if="detailsAreVisible">
|
||||||
<li><strong>Phone:</strong> {{ friend.phone }}</li>
|
<li><strong>Phone:</strong> {{ phoneNumber }}</li>
|
||||||
<li><strong>Email:</strong> {{ friend.email }}</li>
|
<li><strong>Email:</strong> {{ emailAddress }}</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
props: ["name", "emailAddress", "phoneNumber"],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
detailsAreVisible: false,
|
detailsAreVisible: false,
|
||||||
friend: {
|
|
||||||
id: "manuel",
|
|
||||||
name: "Manuel Lorenz",
|
|
||||||
phone: "01234 5678 991",
|
|
||||||
email: "manuel@localhost.com",
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
Reference in New Issue