123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280 |
- const detailsTemplate = `<div>
- <h2>Details</h2>
- <ul>
- <li v-for="detail in details">{{ detail }}</li>
- </ul>
- </div>`;
- const productTemplate = `<div class="product">
- <div class="product-image">
- <a :href="link">
- <!-- bind the src attribute to the "image" property -->
- <img
- v-bind:src="image"
- :alt="description" :title="description"
- /><!-- :attr is shortcut for v-bind:attr -->
- </a>
- </div>
- <div class="product-info">
- <h1 v-cloak>{{ title }}</h1>
- <h2>Available?</h2>
- <p v-cloak v-show="inStock">In stock</p>
- <p v-cloak v-show="!inStock">Out of stock</p>
- <p>Shipping: {{ shipping }}</p>
- <product-details :details="details"></product-details>
- <h2>Colors</h2>
- <ul>
- <li v-for="(variant, index) in variants"
- v-bind:key="variant.variantId"
- @mouseover="updateImage(index)"
- class="color-box"
- :style="{ backgroundColor: variant.variantColor }"
- /><!-- @ est le raccourci de v-on: -->
- </ul>
- <h2>Sizes</h2>
- <ul>
- <li v-for="size in sizes" :key="size">{{ size }}</li>
- </ul>
- <button v-on:click="addToCart"
- :disabled="!inStock"
- :class="{ disabledButton: !inStock }"
- >Add to cart</button>
- <button v-on:click="removeFromCart">Remove</button>
- </div>
- <product-tabs :reviews="reviews"></product-tabs>
- </div>
- `;
- const tabsTemplate = `
- <div>
- <span class="tab"
- :class="{ activeTab: selectedTab == tab }"
- v-for="(tab, index) in tabs" :key="index"
- @click="selectedTab = tab">
- {{ tab }}
- </span>
- <div v-show="selectedTab === 'Reviews'">
- <h2>Reviews</h2>
- <p v-if="!reviews.length">There are no reviews yet.</p>
- <ul>
- <li v-for="review in reviews">
- <p>Name: {{ review.name }}</p>
- <p>Rating: {{ review.rating }}</p>
- <p>Recommends: {{ review.recommend }}</p>
- <p>Review: {{ review.review }}</p>
- </li>
- </ul>
- </div>
- <product-review v-show="selectedTab === 'Make a Review'" ></product-review>
- </div>
- `;
- let eventBus = new Vue();
- Vue.component("product-details", {
- props: {
- details: {
- type: Array,
- required: true,
- },
- },
- template: detailsTemplate,
- });
- Vue.component("product-review", {
- template: `
- <form class="review-form" @submit.prevent="onSubmit">
- <p v-if="errors.length">
- <b>Please correct the following errror(s):</b>
- <ul>
- <li v-for="error in errors">{{ error }}</li>
- </ul>
- </p>
- <p>
- <label for="name">Name:</label>
- <input id="name" v-model="name">
- </p>
- <p>
- <label for="review">Review:</label>
- <textarea id="review" v-model="review"></textarea>
- </p>
- <label for="rating">Rating:</label>
- <select id="rating" v-model.number="rating">
- <option>5</option>
- <option>4</option>
- <option>3</option>
- <option>2</option>
- <option>1</option>
- </select>
- <p>Would you recommend this product?</p>
- <div>
- <label for="reco-no">No</label> <input type="radio" v-model="recommend" id="reco-no" value="no">
- <label for="reco-maybe">Maybe</label><input type="radio" v-model="recommend" id="reco-maybe" value="maybe">
- <label for="reco-yes">Yes</label> <input type="radio" v-model="recommend" id="reco-yes" value="yes">
- </div>
- <p>
- <input type="submit" value="Submit">
- </p>
- </form>
- `,
- data() {
- return {
- name: null,
- recommend: null,
- review: null,
- rating: null,
- errors: [],
- }
- },
- methods: {
- onSubmit(evt) {
- this.errors = [];
- if (this.name && this.review && this.rating && this.recommend) {
- const productReview = {
- name: this.name,
- rating: this.rating,
- recommend: this.recommend,
- review: this.review,
- };
- eventBus.$emit("review-submitted", productReview);
- this.name = null;
- this.rating = null;
- this.recommend = null;
- this.review = null;
- } else {
- for (const field of ["name", "rating", "recommend", "review"]) {
- if (!this[field]) {
- this.errors.push(`${field} required`);
- }
- }
- }
- }
- }
- });
- Vue.component("product-tabs", {
- props: {
- reviews: {
- type: Array,
- required: true,
- }
- },
- template: tabsTemplate,
- data() {
- return {
- selectedTab: "Reviews",
- tabs: ["Reviews", "Make a Review"],
- }
- }
- });
- Vue.component("product", {
- props: {
- isPremium: {
- type: Boolean,
- required: true,
- }
- },
- template: productTemplate,
- // Computer properties are cached until dependencies change.
- // => cheaper than methods.
- computed: {
- image() {
- const image = this.variants[this.selectedVariant].variantImage;
- return image;
- },
- inStock() {
- return this.variants[this.selectedVariant].variantQuantity > 0;
- },
- shipping() {
- if (this.isPremium) {
- return "Free";
- }
- return "2.99 €";
- },
- title() {
- return [this.brand, this.product].join(' ');
- }
- },
- data() {
- return {
- brand: "Vue Mastery",
- description: "Chaussettes montantes",
- details: [
- "80% cotton",
- "20% polyester",
- "Gender-neutral",
- ],
- inventory: 15,
- link: "https://www.google.com/search?q=vuejs+socks",
- product: "Socks",
- reviews: [],
- selectedVariant: 0,
- sizes: [34, 36, 38, 40, 42, 44, 46],
- variants: [
- {
- variantId: 2234,
- variantColor: "green",
- variantImage: "./assets/img/vmSocks-green-onWhite.jpg",
- variantQuantity: 10,
- },
- {
- variantId: 2235,
- variantColor: "blue",
- variantImage: "./assets/img/vmSocks-blue-onWhite.png",
- variantQuantity: 0,
- },
- ]
- }
- },
- methods: {
- addToCart() {
- this.variants[this.selectedVariant].variantQuantity--;
- this.$emit("add-to-cart", this.variants[this.selectedVariant].variantId);
- },
- removeFromCart() {
- this.variants[this.selectedVariant].variantQuantity++;
- this.$emit("remove-from-cart", this.variants[this.selectedVariant].variantId);
- },
- updateImage(index) {
- this.selectedVariant = index;
- }
- },
- mounted() {
- eventBus.$on('review-submitted', productReview => {
- this.reviews.push(productReview);
- });
- }
- });
- const app = new Vue({
- el: "#app",
- data: {
- cart: [],
- isPremium: false,
- },
- methods: {
- removeItem(id) {
- console.log("removeItem", id);
- const index = this.cart.indexOf(id);
- if (index > -1) {
- this.cart.splice(index, 1);
- }
- },
- updateCart(id) {
- console.log("updateCart", id);
- this.cart.push(id);
- }
- }
- });
|