How can I dynamically change the class of 5 stars of FontAwesome Icons from regular to solid based on a numeric variable level that ranges from 0 to 5?
<template>
<div id="five-stars">
<font-awesome-icon v-for="(index, star) in 5" :class="{"fa-solid fa-star": index < level, "fa-regular fa-star": index >= level}" size="6x"/>
</div>
</template>
<script>
export default {
name: "ThreeScene",
data() {
return {
level: 1
};
}
}
I am trying to avoid repeating the <div> element five times. Any suggestions on how I can achieve this? Thank you!