A simple component for product ratings

product_rating.vue

// Product Star Rating Display
Vue.component("prod-rating", {
  props: ["rating"],
  data(){
    return {
      stars: []
    }
  },
  mounted: function () {
    let ratingTracker = this.rating;
    // Loop 5 times for 5 stars!
    for(i=1; i<=5; i++){
      // Is the rating higher than our iterator?
      if(this.rating >= i){
        // Full star for you!
        this.stars.push("icon-star-full");
        ratingTracker--;
      }else{
        // No? How about we see if we have anything left...
        if(ratingTracker % 1 !== 0){
          // Half a star for you!
          this.stars.push("icon-star-half");  
          ratingTracker = 0;
        }else{
          // Nothings left. No stars for you!
          this.stars.push("icon-star-empty");
          ratingTracker--;
        }
      }
    }
  },
  template: `
  <div class="rating">
    <span v-for="star in stars" :class="star +  ' icon glyph'"></span>
  </div>
  `
});