<div id="app">
  <product-review></product-review>
</div> 

body {
	font-family: sans-serif;
  margin: 0px;
}

.form {
	width: 350px;
  padding: 25px;
  margin: 65px auto;
  border: 1px solid #d8d8d8;
}

input {
	width: 100%;  
  height: 25px;
  margin-bottom: 20px;
}

textarea {
	width: 100%;
  height: 50px;
}

#rating {
	height: 25px;
}

li {
	color: #d40e00;
}

Vue.component('product-review', {
    template: `
      <form class="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">
        </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>⭐⭐⭐⭐⭐</option>
            <option>⭐⭐⭐⭐</option>
            <option>⭐⭐⭐</option>
            <option>⭐⭐</option>
            <option>⭐</option>
          </select>
        </p> 
        <p>
          <input type="submit" value="Submit"> 
        </p>    
      
    </form>
    `,
    data() {
      return {
        name: null,
        review: null,
        rating: null,
        errors: []
      }
    },
    methods: {
      onSubmit() {
        this.errors = []
        if(this.name && this.review && this.rating) {
          let productReview = {
            name: this.name,
            review: this.review,
            rating: this.rating
          }
          this.name = null
          this.review = null
          this.rating = null
        } else {
          if(!this.name) this.errors.push("Name required.")
          if(!this.review) this.errors.push("Review required.")
          if(!this.rating) this.errors.push("Rating required.")
      }
    }}
  })
  
  var app = new Vue({
      el: '#app',
  })