make the button text dynamic
This commit is contained in:
parent
990f588ed5
commit
1b34a7753f
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<li>
|
<li>
|
||||||
<h2>{{ friend.name }}</h2>
|
<h2>{{ friend.name }}</h2>
|
||||||
<button @click="toggleDetails()">Show Details</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> {{ friend.phone }}</li>
|
||||||
<li><strong>Email:</strong> {{ friend.email }}</li>
|
<li><strong>Email:</strong> {{ friend.email }}</li>
|
||||||
|
@ -22,6 +22,15 @@ export default {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
buttonDetailsText() {
|
||||||
|
if (this.detailsAreVisible) {
|
||||||
|
return "Hide Details";
|
||||||
|
} else {
|
||||||
|
return "Show Details";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
toggleDetails() {
|
toggleDetails() {
|
||||||
this.detailsAreVisible = !this.detailsAreVisible;
|
this.detailsAreVisible = !this.detailsAreVisible;
|
||||||
|
|
Reference in New Issue