corso vuejs
view | history | commit | commitdiff
Cristiano Magro
2024-12-29 2759e22ee0648b69d8007f37f08aa476e3f04c47
commit | author | age
f31b9e 1 <template>
498b47 2   <section>
CM 3     <header>
4       <h1>My friends</h1>
5     </header>
2759e2 6     <new-friend @add-contact="addContact"></new-friend>
498b47 7     <ul>
2759e2 8       <friend-contact v-for="friend in friends" 
CM 9         :key="friend.id" 
10         :id="friend.id" 
11         :name="friend.name"
12         :phone-number="friend.phone" 
13         :email-address="friend.email" 
14         :is-favorite="friend.isFavorite"
15         @toggle-favorite="toggleFavoriteStatus"></friend-contact>
498b47 16     </ul>
CM 17   </section>
f31b9e 18 </template>
CM 19
20 <script>
21 export default {
498b47 22   data() {
CM 23     return {
24       friends: [
25         {
26           id: "manuel",
27           name: "Manuel Lorenz",
28           phone: "01234 5678 991",
29           email: "manuel@localhost.com",
8480d4 30           isFavorite: true,
498b47 31         },
CM 32         {
33           id: "julie",
34           name: "Julie Jones",
35           phone: "09876 543 221",
36           email: "julie@localhost.com",
2759e2 37           isFavorite: true,
498b47 38         },
CM 39       ],
40     }
41   },
2759e2 42   watch: {
CM 43
44   },
45   methods: {
46     toggleFavoriteStatus(friendId) {
47       const found = this.friends.find(
8480d4 48         (friend) => friend.id === friendId
CM 49       );
50       found.isFavorite = !found.isFavorite;
2759e2 51     },
CM 52
53     addContact(name, phone, email) {
54       const newFriendContact={
55         id: new Date().toISOString + name,
56         name: name,
57         phone: phone,
58         email:email,
59       };
60
61       this.friends.push(newFriendContact);
8480d4 62     }
2759e2 63
8480d4 64   }
f31b9e 65 };
f54162 66 </script>
CM 67
68 <style>
498b47 69 @import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');
f54162 70
CM 71 * {
72   box-sizing: border-box;
73 }
74
75 html {
76   font-family: 'Jost', sans-serif;
77 }
78
79 body {
80   margin: 0;
81 }
82
83 header {
84   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
85   margin: 3rem auto;
86   border-radius: 10px;
87   padding: 1rem;
88   background-color: #58004d;
89   color: white;
90   text-align: center;
91   width: 90%;
92   max-width: 40rem;
93 }
94
95 #app ul {
96   margin: 0;
97   padding: 0;
98   list-style: none;
99 }
100
2759e2 101 #app li,
CM 102 #app form {
f54162 103   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
CM 104   margin: 1rem auto;
105   border-radius: 10px;
106   padding: 1rem;
107   text-align: center;
108   width: 90%;
109   max-width: 40rem;
110 }
111
112 #app h2 {
113   font-size: 2rem;
114   border-bottom: 4px solid #ccc;
115   color: #58004d;
116   margin: 0 0 1rem 0;
117 }
118
119 #app button {
120   font: inherit;
121   cursor: pointer;
122   border: 1px solid #ff0077;
123   background-color: #ff0077;
124   color: white;
125   padding: 0.05rem 1rem;
126   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
127 }
128
129 #app button:hover,
130 #app button:active {
131   background-color: #ec3169;
132   border-color: #ec3169;
133   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
134 }
2759e2 135
CM 136 #app input {
137   font: inherit;
138   padding: 0.15rem;
139 }
140
141 #app label {
142   font-weight: bold;
143   margin-right: 1rem;
144   width: 7rem;
145   display: inline-block;
146 }
147
148 #app form div {
149   margin: 1rem 0;
150 }
f54162 151 </style>