|
@@ -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`);
|
|
|
}
|