[Vuejs]-Rating-stars component vuejs2

by

0👍

✅

One simple way:

new Vue({
  el: '#demo',
  data() {
    return {
      stars: new Array(10)
          .fill('<i class="fa-solid fa-star"></i>', 0, 5)
          .fill('<i class="fa-regular fa-star"></i>', 5, 10),
      nr: 3
    }
  },
  methods: {
    rating() {
      return this.stars.slice(5 - this.nr, 10 - this.nr).join("")
    }
  }
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div v-html="rating()"></div>
  <input type="number" v-model="nr" min="0" max="5" />
</div>
👤Nikola Pavicevic

1👍

You can do something like that :

<div v-for="n in getStarRatingValue()">
    // full star
</div>
<div v-for="n in (5 - getStarRatingValue())">
    // empty star
</div>

where getStarRatingValue is a function that return your rating from 0 to 5

👤Lk77

Leave a comment