L11-end

Author: Andy

src/components/ProductDisplay.vue

@@ -1,5 +1,7 @@
 <script setup>
 import { ref, computed } from 'vue'
+import ReviewForm from '@/components/ReviewForm.vue'
+import ReviewList from '@/components/ReviewList.vue'
 import socksGreenImage from '@/assets/images/socks_green.jpeg'
 import socksBlueImage from '@/assets/images/socks_blue.jpeg'
 
@@ -24,6 +26,8 @@ const variants = ref([
   { id: 2235, color: 'blue', image: socksBlueImage, quantity: 0 },
 ])
 
+const reviews = ref([])
+
 const title = computed(() => {
   return brand.value + ' ' + product.value
 })
@@ -52,6 +56,10 @@ const addToCart = () => {
 const updateVariant = (index) => {
   selectedVariant.value = index
 }
+
+const addReview = (review) => {
+  reviews.value.push(review)
+}
 </script>
 
 <template>
@@ -70,7 +78,7 @@ const updateVariant = (index) => {
         </ul>
         <div 
           v-for="(variant, index) in variants" 
-          key="variant.key"
+          :key="variant.id"
           @mouseover="updateVariant(index)"
           class="color-circle"
           :style="{ backgroundColor: variant.color }"
@@ -86,5 +94,7 @@ const updateVariant = (index) => {
         </button>
       </div>
     </div>
+    <ReviewList v-if="reviews.length > 0" :reviews="reviews"></ReviewList>
+    <ReviewForm @review-submitted="addReview"></ReviewForm>
   </div>
 </template>

src/components/ReviewForm.vue

@@ -3,18 +3,28 @@ import { reactive } from 'vue'
 
 const emit = defineEmits(['review-submitted'])
 
-const getDefaultFormData = () => ({
+const review = reactive({
   name: '',
   content: '',
   rating: null
 })
 
-const review = reactive(getDefaultFormData())
-
 const onSubmit = () => {
-  const reviewData = JSON.parse(JSON.stringify(review))
-  emit('review-submitted', reviewData)
-  Object.assign(review, getDefaultFormData())
+  if (review.name === '' || review.content === '' || review.rating === null) {
+    alert('Review is incomplete. Please fill out every field.')
+    return
+  }
+
+  const productReview = {
+    name: review.name,
+    content: review.content,
+    rating: review.rating
+  }
+  emit('review-submitted', productReview)
+
+  review.name = ''
+  review.content = ''
+  review.rating = null
 }
 </script>
 

src/components/ReviewList.vue

@@ -0,0 +1,21 @@
+<script setup>
+defineProps({
+  reviews: {
+    type: Array,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <div class="review-container">
+    <h3>Reviews:</h3>
+    <ul>
+      <li v-for="(review, index) in reviews" :key="index">
+        <span>{{ review.name }} gave this {{ review.rating }} stars</span>
+        <br/>
+        <span>"{{ review.content }}"</span>
+      </li>
+    </ul>
+  </div>
+</template>