Rating-stars component vuejs2-CodePudding

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

CodePudding user response：

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

CodePudding user response：

One simple way:

new Vue({
  el: '#demo',
  data() {
    return {
      stars: new Array(10).fill('<i ></i>', 0, 5).fill('<i ></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>