Step 10: forms exercise.

main.js

@@ -50,12 +50,13 @@ const productTemplate = `<div class="product">
       <p v-if="!reviews.length">There are no reviews yet.</p>
       <ul>
         <li v-for="review in reviews">
-          <p>{{ review.name }}</p>
-          <p>{{ review.rating }}</p>
-          <p>{{ review.review }}</p>
+          <p>Name: {{ review.name }}</p>
+          <p>Rating: {{ review.rating }}</p>
+          <p>Recommends: {{ review.recommend }}</p>
+          <p>Review: {{ review.review }}</p>
         </li>
       </ul>
-    </div>
+  </div>
     <product-review @review-submitted="addReview"></product-review>
     </div>
 `;
@@ -72,40 +73,48 @@ Vue.component("product-details", {
 
 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>
+      <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>
 
-          <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>
 
-          <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>
+        <p>
+          <input type="submit" value="Submit">
+        </p>
+      </form>
     `,
     data() {
         return {
             name: null,
+            recommend: null,
             review: null,
             rating: null,
             errors: [],
@@ -114,18 +123,20 @@ Vue.component("product-review", {
     methods: {
         onSubmit(evt) {
             this.errors = [];
-            if (this.name && this.review && this.rating) {
+            if (this.name && this.review && this.rating && this.recommend) {
                 const productReview = {
                     name: this.name,
                     rating: this.rating,
+                    recommend: this.recommend,
                     review: this.review,
                 };
                 this.$emit("review-submitted", productReview);
                 this.name = null;
                 this.rating = null;
+                this.recommend = null;
                 this.review = null;
             } else {
-                for (const field of ["name", "rating", "review"]) {
+                for (const field of ["name", "rating", "recommend", "review"]) {
                     if (!this[field]) {
                         this.errors.push(`${field} required`);
                     }