Skip to content

Instantly share code, notes, and snippets.

@joewashere

joewashere/product_rating.vue

Created September 1, 2019 22:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save joewashere/67e7e35aa05df6cd5aeabf8632f040d5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save joewashere/67e7e35aa05df6cd5aeabf8632f040d5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. joewashere created this gist Sep 1, 2019.
    37 changes: 37 additions & 0 deletions product_rating.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    // 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>
    `
    });