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