javascriptvue.jsvuejs2rating

Rating-stars component vuejs2

I have an integral number from one to five and I should be able to print the number of stars (using FontAwersome) based on that number. What can I do?

I have to use VueJS 2

Solution

  • 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>