Forms

Author: sirchris

index.html

@@ -15,7 +15,12 @@
                 <p>Cart ({{ cart.length }})</p>
             </div>
 
-            <product :premium="premium" :details="details" @add-to-cart="updateCart" @remove-from-cart="removeFromCart"></product>
+            <product
+                :premium="premium"
+                :details="details"
+                @add-to-cart="updateCart"
+                @remove-from-cart="removeFromCart"
+            ></product>
         </div>
 
         <script src="https://cdn.jsdelivr.net/npm/vue@2.6.7/dist/vue.js"></script>

index.js

@@ -50,6 +50,26 @@ Vue.component('product', {
                 </button>
                 <button @click="removeFromCart">Remove from cart</button>
             </div>
+
+            <div>
+                <h2>Reviews</h2>
+
+                <p v-if="!reviews.length">There are no reviews yet.</p>
+
+                <ul>
+                    <li v-for="review in reviews">
+                        <p>{{ review.name }}</p>
+
+                        <p>Rating: {{ review.rating }}</p>
+
+                        <p>Recommended: {{ review.recommended }}</p>
+
+                        <p>{{ review.review }}</p>
+                    </li>
+                </ul>
+            </div>
+
+            <productReview @review-submitted="addReview"></productReview>
         </div>
     `,
     data() {
@@ -73,7 +93,8 @@ Vue.component('product', {
                     image: '/img/vmSocks-green-onWhite.jpg',
                     quantity: 2
                 }
-            ]
+            ],
+            reviews: []
         };
     },
     methods: {
@@ -88,6 +109,9 @@ Vue.component('product', {
         },
         updateProduct(index) {
             this.selectedVariant = index;
+        },
+        addReview(productReview) {
+            this.reviews.push(productReview);
         }
     },
     computed: {
@@ -120,6 +144,86 @@ Vue.component('productDetails', {
     `
 });
 
+Vue.component('productReview', {
+    template: `
+        <form class="review-form" @submit.prevent="onSubmit">
+            <p v-if="errors.length">
+                <b>Please correct the following error(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" placeholder="name" />
+            </p>
+
+            <p>
+                <label for="recommended">Will you recommend this product?</label>
+                <div>yes: <input id="recommended" v-model="recommended" type="radio" value="yes" /></div>
+                <div>no: <input id="recommended" v-model="recommended" type="radio" value="no" /></div>
+            </p>
+
+            <p>
+                <label for="review">Review:</label>
+                <textarea id="review" v-model="review"></textarea>
+            </p>
+
+            <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>
+
+            <p>
+                <input type="submit" value="Submit" />
+            </p>
+        </form>
+    `,
+    data() {
+        return {
+            name: null,
+            rating: null,
+            review: null,
+            recommended: null,
+            errors: []
+        };
+    },
+    methods: {
+        onSubmit() {
+            if (this.name && this.review && this.rating) {
+                let productReview = {
+                    name: this.name,
+                    review: this.review,
+                    rating: this.rating,
+                    recommended: this.recommended
+                };
+
+                this.$emit('review-submitted', productReview);
+
+                this.name = null;
+                this.review = null;
+                this.rating = null;
+                this.recommended = null;
+            } else {
+                this.errors = [];
+
+                if (!this.name) this.errors.push('Name required.');
+                if (!this.review) this.errors.push('Review required.');
+                if (!this.rating) this.errors.push('Rating required.');
+                if (!this.recommended) this.errors.push('Recomendation required.');
+            }
+        }
+    }
+});
+
 var app = new Vue({
     el: '#app',
     data: {