move the contact template to the component
This commit is contained in:
parent
1c6769e900
commit
ce366e1f58
|
@ -23,9 +23,25 @@ const app = Vue.createApp({
|
||||||
|
|
||||||
// use multiword component names
|
// use multiword component names
|
||||||
app.component("user-contact", {
|
app.component("user-contact", {
|
||||||
|
template: `
|
||||||
|
<li>
|
||||||
|
<h2>{{ friend.name }}</h2>
|
||||||
|
<button @click="toggleDetails()">Show Details</button>
|
||||||
|
<ul v-if="detailsAreVisible">
|
||||||
|
<li><strong>Phone:</strong> {{ friend.phone }}</li>
|
||||||
|
<li><strong>Email:</strong> {{ friend.email }}</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
`,
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
detailsAreVisible: false,
|
detailsAreVisible: false,
|
||||||
|
friend: {
|
||||||
|
id: "manuel",
|
||||||
|
name: "Manuel Lorenz",
|
||||||
|
phone: "01234 5678 991",
|
||||||
|
email: "manuel@localhost.com",
|
||||||
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
|
@ -17,14 +17,7 @@
|
||||||
</header>
|
</header>
|
||||||
<section id="app">
|
<section id="app">
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="friend in friends">
|
<user-contact></user-contact>
|
||||||
<h2>{{ friend.name }}</h2>
|
|
||||||
<button @click="toggleDetails()">Show Details</button>
|
|
||||||
<ul v-if="detailsAreVisible">
|
|
||||||
<li><strong>Phone:</strong> {{ friend.phone }}</li>
|
|
||||||
<li><strong>Email:</strong> {{ friend.email }}</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
</body>
|
</body>
|
||||||
|
|
Reference in New Issue