rootuss

Untitled

Jun 27th, 2021
1,038
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. ///// main.js
  2. import { createApp } from "vue";
  3.  
  4. import App from "./App.vue";
  5. import FriendContact from "./components/FriendContact.vue";
  6. import NewFriend from "./components/NewFriend.vue";
  7.  
  8. const app = createApp(App);
  9.  
  10. app.component("friend-contact", FriendContact);
  11. app.component("new-friend", NewFriend);
  12.  
  13. app.mount("#app");
  14. /////
  15.  
  16. ///// App.vue
  17. <template>
  18.   <section>
  19.     <header>
  20.       <h1>My Friends</h1>
  21.     </header>
  22.     <new-friend @add-contact="addContact"> </new-friend>
  23.     <ul>
  24.       <friend-contact
  25.         v-for="friend in friends"
  26.         :key="friend.id"
  27.         :id="friend.id"
  28.         :name="friend.name"
  29.         :phone-number="friend.phone"
  30.         :email-address="friend.email"
  31.         :is-favourite="friend.isFavourite"
  32.         @toogle-favourite="toogleFavouriteStatus"
  33.         @delete="deleteContact"
  34.       ></friend-contact>
  35.     </ul>
  36.   </section>
  37. </template>
  38.  
  39. <script>
  40. export default {
  41.   data() {
  42.     return {
  43.       friends: [
  44.         {
  45.           id: "manuel",
  46.           name: "Manuel Lorenz",
  47.           phone: "0123 45678 90",
  48.           email: "manuel@localhost.com",
  49.           isFavourite: true,
  50.         },
  51.         {
  52.           id: "julie",
  53.           name: "Julie Jones",
  54.           phone: "0987 654421 21",
  55.           email: "julie@localhost.com",
  56.           isFavourite: false,
  57.         },
  58.       ],
  59.     };
  60.   },
  61.   methods: {
  62.     toogleFavouriteStatus(friendId) {
  63.       const identifyFriend = this.friends.find(
  64.         (friend) => friend.id === friendId
  65.       );
  66.       identifyFriend.isFavourite = !identifyFriend.isFavourite;
  67.     },
  68.  
  69.     addContact(nameN, phoneN, emailN) {
  70.       const newFriendContact = {
  71.         id: Math.random().toString,
  72.         name: nameN,
  73.         phone: phoneN,
  74.         email: emailN,
  75.         isFavourite: false,
  76.       };
  77.       this.friends.push(newFriendContact);
  78.     },
  79.     deleteContact(id) {
  80.       this.friends = this.friends.filter((friend) => friend.id !== id);
  81.     },
  82.   },
  83. };
  84. </script>
  85.  
  86. <style>
  87. ...
  88. </style>
  89. /////
  90.  
  91.  
  92. ///// FriendContact.vue
  93. <template>
  94.   <li>
  95.     <h2>{{ name }} {{ isFavourite ? "(fav)" : "" }}</h2>
  96.     <button @click="toogleFavourite">Toogle Favourite</button>
  97.     <button @click="toggleDetails">Show Details</button>
  98.     <ul v-if="detailsAreVisible">
  99.       <li>
  100.         <strong>Phone:</strong>
  101.         {{ phoneNumber }}
  102.       </li>
  103.       <li>
  104.         <strong>Email:</strong>
  105.         {{ emailAddress }}
  106.       </li>
  107.     </ul>
  108.  
  109.     <button @click="deleteFriend">Delete</button>
  110.   </li>
  111. </template>
  112.  
  113. <script>
  114. export default {
  115.   // props: ["name", "phoneNumber", "emailAddress", "isFavourite"],
  116.   props: {
  117.     id: {
  118.       type: String,
  119.       required: true,
  120.     },
  121.     name: {
  122.       type: String,
  123.       required: true,
  124.     },
  125.     phoneNumber: {
  126.       type: String,
  127.       required: true,
  128.     },
  129.     emailAddress: {
  130.       type: String,
  131.       required: true,
  132.     },
  133.     isFavourite: {
  134.       type: Boolean,
  135.       required: false,
  136.       default: false,
  137.       // validator: function(value) {
  138.       //   return value === "1" || value === "0";
  139.       // },
  140.       // ^^^ można walidować
  141.     },
  142.   },
  143.   emits: ["tooggle-favourite", "delete"],
  144.   // emits: { <<inna opcja z wadidacją np.
  145.   //   "tooggle-favourite": function(id) {
  146.   //     if (id) {
  147.   //       return true;
  148.   //     } else {
  149.   //       console.warn("ID is missing!");
  150.   //       return false;
  151.   //     }
  152.   //   },
  153.   // },
  154.   data() {
  155.     return {
  156.       detailsAreVisible: false,
  157.       // friendIsFavourite: this.isFavourite,
  158.       // ^^ dodajemy to w celu tym, żeby nie zmieniac wartosci podanej w rodzicu bezpośrednio
  159.       // ale nie potrzeba tego, jeśli zmienaiamy w rodzicu
  160.     };
  161.   },
  162.   methods: {
  163.     toggleDetails() {
  164.       this.detailsAreVisible = !this.detailsAreVisible;
  165.     },
  166.     toogleFavourite() {
  167.       // this.$emit("toogle-favourite");
  168.       this.$emit("toogle-favourite", this.id);
  169.       // emitujemy zmiany do rodzica
  170.       // przekazujemy ile argumentów chcemy, np. jakies dane
  171.       // w tym przyapdku id
  172.     },
  173.  
  174.     deleteFriend() {
  175.       this.$emit("delete", this.id);
  176.     },
  177.   },
  178. };
  179. </script>
  180. /////
  181.  
  182.  
  183. ///// NewFriend.vue
  184. <template>
  185.   <form @submit.prevent="submitData">
  186.     <!-- żeby się nie odświeżało! -->
  187.     <div>
  188.       <label>Name</label>
  189.       <input type="text" v-model="enteredName" />
  190.     </div>
  191.  
  192.     <div>
  193.       <label>Phone</label>
  194.       <input type="tel" v-model="enteredPhone" />
  195.     </div>
  196.  
  197.     <div>
  198.       <label>Email</label>
  199.       <input type="email" v-model="enteredEmail" />
  200.     </div>
  201.  
  202.     <div>
  203.       <button>Add friend</button>
  204.     </div>
  205.   </form>
  206. </template>
  207. F
  208. <script>
  209. export default {
  210.   emits: ["add-contact"],
  211.   data() {
  212.     return {
  213.       enteredName: "",
  214.       enteredPhone: "",
  215.       enteredEmail: "",
  216.     };
  217.   },
  218.   methods: {
  219.     submitData() {
  220.       this.$emit(
  221.         "add-contact",
  222.         this.enteredName,
  223.         this.enteredPhone,
  224.         this.enteredEmail
  225.       );
  226.     },
  227.   },
  228. };
  229. </script>
  230. /////
  231.  
  232.  
  233.  
RAW Paste Data