Tengo un número entero del uno al cinco y debería poder imprimir el número de estrellas (usando FontAwersome) en función de ese número. ¿Que puedo hacer?
Tengo que usar VueJS 2
Puedes hacer algo como eso:
<div v-for="n in getStarRatingValue()"> // full star </div> <div v-for="n in (5 - getStarRatingValue())"> // empty star </div> donde getStarRatingValue es una función que devuelve su calificación de 0 a 5
Una manera simple:
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>