add the FriendContact component
This commit is contained in:
parent
725a1ed549
commit
b1c7607df3
File diff suppressed because it is too large
Load Diff
|
@ -1,9 +1,15 @@
|
||||||
<template>
|
<template>
|
||||||
<h2>My Friends</h2>
|
<h2>My Friends</h2>
|
||||||
|
<ul>
|
||||||
|
<friend-contact></friend-contact>
|
||||||
|
<friend-contact></friend-contact>
|
||||||
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import FriendContact from "./components/FriendContact.vue";
|
||||||
export default {
|
export default {
|
||||||
|
components: { FriendContact },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
friends: [
|
friends: [
|
||||||
|
|
|
@ -0,0 +1,31 @@
|
||||||
|
<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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
detailsAreVisible: false,
|
||||||
|
friend: {
|
||||||
|
id: "manuel",
|
||||||
|
name: "Manuel Lorenz",
|
||||||
|
phone: "01234 5678 991",
|
||||||
|
email: "manuel@localhost.com",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleDetails() {
|
||||||
|
this.detailsAreVisible = !this.detailsAreVisible;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
|
@ -1,4 +1,9 @@
|
||||||
import { createApp } from "vue";
|
import { createApp } from "vue";
|
||||||
import App from "./App.vue";
|
import App from "./App.vue";
|
||||||
|
import FriendContact from "./components/FriendContact";
|
||||||
|
|
||||||
createApp(App).mount("#app");
|
const app = createApp(App);
|
||||||
|
|
||||||
|
app.component("friend-contact", FriendContact);
|
||||||
|
|
||||||
|
app.mount("#app");
|
||||||
|
|
Reference in New Issue