main.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
  1. const detailsTemplate = `<div>
  2. <h2>Details</h2>
  3. <ul>
  4. <li v-for="detail in details">{{ detail }}</li>
  5. </ul>
  6. </div>`;
  7. const productTemplate = `<div class="product">
  8. <div class="product-image">
  9. <a :href="link">
  10. <!-- bind the src attribute to the "image" property -->
  11. <img
  12. v-bind:src="image"
  13. :alt="description" :title="description"
  14. /><!-- :attr is shortcut for v-bind:attr -->
  15. </a>
  16. </div>
  17. <div class="product-info">
  18. <h1 v-cloak>{{ title }}</h1>
  19. <h2>Available?</h2>
  20. <p v-cloak v-show="inStock">In stock</p>
  21. <p v-cloak v-show="!inStock">Out of stock</p>
  22. <p>Shipping: {{ shipping }}</p>
  23. <product-details :details="details"></product-details>
  24. <h2>Colors</h2>
  25. <ul>
  26. <li v-for="(variant, index) in variants"
  27. v-bind:key="variant.variantId"
  28. @mouseover="updateImage(index)"
  29. class="color-box"
  30. :style="{ backgroundColor: variant.variantColor }"
  31. /><!-- @ est le raccourci de v-on: -->
  32. </ul>
  33. <h2>Sizes</h2>
  34. <ul>
  35. <li v-for="size in sizes" :key="size">{{ size }}</li>
  36. </ul>
  37. <button v-on:click="addToCart"
  38. :disabled="!inStock"
  39. :class="{ disabledButton: !inStock }"
  40. >Add to cart</button>
  41. <button v-on:click="removeFromCart">Remove</button>
  42. </div>
  43. <product-tabs :reviews="reviews"></product-tabs>
  44. </div>
  45. `;
  46. const tabsTemplate = `
  47. <div>
  48. <span class="tab"
  49. :class="{ activeTab: selectedTab == tab }"
  50. v-for="(tab, index) in tabs" :key="index"
  51. @click="selectedTab = tab">
  52. {{ tab }}
  53. </span>
  54. <div v-show="selectedTab === 'Reviews'">
  55. <h2>Reviews</h2>
  56. <p v-if="!reviews.length">There are no reviews yet.</p>
  57. <ul>
  58. <li v-for="review in reviews">
  59. <p>Name: {{ review.name }}</p>
  60. <p>Rating: {{ review.rating }}</p>
  61. <p>Recommends: {{ review.recommend }}</p>
  62. <p>Review: {{ review.review }}</p>
  63. </li>
  64. </ul>
  65. </div>
  66. <product-review v-show="selectedTab === 'Make a Review'" ></product-review>
  67. </div>
  68. `;
  69. let eventBus = new Vue();
  70. Vue.component("product-details", {
  71. props: {
  72. details: {
  73. type: Array,
  74. required: true,
  75. },
  76. },
  77. template: detailsTemplate,
  78. });
  79. Vue.component("product-review", {
  80. template: `
  81. <form class="review-form" @submit.prevent="onSubmit">
  82. <p v-if="errors.length">
  83. <b>Please correct the following errror(s):</b>
  84. <ul>
  85. <li v-for="error in errors">{{ error }}</li>
  86. </ul>
  87. </p>
  88. <p>
  89. <label for="name">Name:</label>
  90. <input id="name" v-model="name">
  91. </p>
  92. <p>
  93. <label for="review">Review:</label>
  94. <textarea id="review" v-model="review"></textarea>
  95. </p>
  96. <label for="rating">Rating:</label>
  97. <select id="rating" v-model.number="rating">
  98. <option>5</option>
  99. <option>4</option>
  100. <option>3</option>
  101. <option>2</option>
  102. <option>1</option>
  103. </select>
  104. <p>Would you recommend this product?</p>
  105. <div>
  106. <label for="reco-no">No</label> <input type="radio" v-model="recommend" id="reco-no" value="no">
  107. <label for="reco-maybe">Maybe</label><input type="radio" v-model="recommend" id="reco-maybe" value="maybe">
  108. <label for="reco-yes">Yes</label> <input type="radio" v-model="recommend" id="reco-yes" value="yes">
  109. </div>
  110. <p>
  111. <input type="submit" value="Submit">
  112. </p>
  113. </form>
  114. `,
  115. data() {
  116. return {
  117. name: null,
  118. recommend: null,
  119. review: null,
  120. rating: null,
  121. errors: [],
  122. }
  123. },
  124. methods: {
  125. onSubmit(evt) {
  126. this.errors = [];
  127. if (this.name && this.review && this.rating && this.recommend) {
  128. const productReview = {
  129. name: this.name,
  130. rating: this.rating,
  131. recommend: this.recommend,
  132. review: this.review,
  133. };
  134. eventBus.$emit("review-submitted", productReview);
  135. this.name = null;
  136. this.rating = null;
  137. this.recommend = null;
  138. this.review = null;
  139. } else {
  140. for (const field of ["name", "rating", "recommend", "review"]) {
  141. if (!this[field]) {
  142. this.errors.push(`${field} required`);
  143. }
  144. }
  145. }
  146. }
  147. }
  148. });
  149. Vue.component("product-tabs", {
  150. props: {
  151. reviews: {
  152. type: Array,
  153. required: true,
  154. }
  155. },
  156. template: tabsTemplate,
  157. data() {
  158. return {
  159. selectedTab: "Reviews",
  160. tabs: ["Reviews", "Make a Review"],
  161. }
  162. }
  163. });
  164. Vue.component("product", {
  165. props: {
  166. isPremium: {
  167. type: Boolean,
  168. required: true,
  169. }
  170. },
  171. template: productTemplate,
  172. // Computer properties are cached until dependencies change.
  173. // => cheaper than methods.
  174. computed: {
  175. image() {
  176. const image = this.variants[this.selectedVariant].variantImage;
  177. return image;
  178. },
  179. inStock() {
  180. return this.variants[this.selectedVariant].variantQuantity > 0;
  181. },
  182. shipping() {
  183. if (this.isPremium) {
  184. return "Free";
  185. }
  186. return "2.99 €";
  187. },
  188. title() {
  189. return [this.brand, this.product].join(' ');
  190. }
  191. },
  192. data() {
  193. return {
  194. brand: "Vue Mastery",
  195. description: "Chaussettes montantes",
  196. details: [
  197. "80% cotton",
  198. "20% polyester",
  199. "Gender-neutral",
  200. ],
  201. inventory: 15,
  202. link: "https://www.google.com/search?q=vuejs+socks",
  203. product: "Socks",
  204. reviews: [],
  205. selectedVariant: 0,
  206. sizes: [34, 36, 38, 40, 42, 44, 46],
  207. variants: [
  208. {
  209. variantId: 2234,
  210. variantColor: "green",
  211. variantImage: "./assets/img/vmSocks-green-onWhite.jpg",
  212. variantQuantity: 10,
  213. },
  214. {
  215. variantId: 2235,
  216. variantColor: "blue",
  217. variantImage: "./assets/img/vmSocks-blue-onWhite.png",
  218. variantQuantity: 0,
  219. },
  220. ]
  221. }
  222. },
  223. methods: {
  224. addToCart() {
  225. this.variants[this.selectedVariant].variantQuantity--;
  226. this.$emit("add-to-cart", this.variants[this.selectedVariant].variantId);
  227. },
  228. removeFromCart() {
  229. this.variants[this.selectedVariant].variantQuantity++;
  230. this.$emit("remove-from-cart", this.variants[this.selectedVariant].variantId);
  231. },
  232. updateImage(index) {
  233. this.selectedVariant = index;
  234. }
  235. },
  236. mounted() {
  237. eventBus.$on('review-submitted', productReview => {
  238. this.reviews.push(productReview);
  239. });
  240. }
  241. });
  242. const app = new Vue({
  243. el: "#app",
  244. data: {
  245. cart: [],
  246. isPremium: false,
  247. },
  248. methods: {
  249. removeItem(id) {
  250. console.log("removeItem", id);
  251. const index = this.cart.indexOf(id);
  252. if (index > -1) {
  253. this.cart.splice(index, 1);
  254. }
  255. },
  256. updateCart(id) {
  257. console.log("updateCart", id);
  258. this.cart.push(id);
  259. }
  260. }
  261. });