extend props example
This commit is contained in:
parent
b5207c1399
commit
d737b3d88c
|
@ -6,6 +6,7 @@
|
|||
name="Manuel Lorenz"
|
||||
email-address="manuel@localhost.com"
|
||||
phone-number="0123 4567 890"
|
||||
is-favorite="1"
|
||||
></friend-contact>
|
||||
<friend-contact
|
||||
name="Julie Jones"
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
<template>
|
||||
<li>
|
||||
<h2>{{ name }}</h2>
|
||||
<h2>{{ name }} {{ isFavoriteText }}</h2>
|
||||
<button @click="toggleDetails()">{{ buttonDetailsText }}</button>
|
||||
<button @click="toggleFavorite()">Mark as Favorite</button>
|
||||
<ul v-if="detailsAreVisible">
|
||||
<li><strong>Phone:</strong> {{ phoneNumber }}</li>
|
||||
<li><strong>Email:</strong> {{ emailAddress }}</li>
|
||||
|
@ -11,10 +12,33 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
props: ["name", "emailAddress", "phoneNumber"],
|
||||
//props: ["name", "emailAddress", "phoneNumber"],
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
phoneNumber: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
emailAddress: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
isFavorite: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "0",
|
||||
validator: function(value) {
|
||||
return value === "0" || value === "1";
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
detailsAreVisible: false,
|
||||
friendIsFavorite: this.isFavorite,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
@ -25,11 +49,25 @@ export default {
|
|||
return "Show Details";
|
||||
}
|
||||
},
|
||||
isFavoriteText() {
|
||||
if (this.friendIsFavorite === "1") {
|
||||
return "(Favorite)";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggleDetails() {
|
||||
this.detailsAreVisible = !this.detailsAreVisible;
|
||||
},
|
||||
toggleFavorite() {
|
||||
if (this.friendIsFavorite === "1") {
|
||||
this.friendIsFavorite = "0";
|
||||
} else {
|
||||
this.friendIsFavorite = "1";
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
Reference in New Issue