I had the idea to create an object like this:
So, I started with the following code:
<div class="p-2 border-2 border-blue-300 mr-auto rounded-full space-x-1">
<button class="text-white w-7 border-2 border-BgLightBlue rounded-full hover:border-primary hover:bg-BgLightBlue"><i class="fa-solid fa-circle"></i></button>
<button class="text-yellow-400 w-7 border-2 border-BgLightBlue rounded-full hover:border-primary hover:bg-BgLightBlue"><i class="fa-solid fa-circle"></i></button>
<button class="text-orange-400 w-7 border-2 border-BgLightBlue rounded-full hover:border-primary hover:bg-BgLightBlue"><i class="fa-solid fa-circle"></i></button>
<button class="text-green-800 w-7 border-2 border-BgLightBlue rounded-full hover:border-primary hover:bg-BgLightBlue"><i class="fa-solid fa-circle"></i></button>
<button class="text-sky-500 w-7 border-2 border-BgLightBlue rounded-full hover:border-primary hover:bg-BgLightBlue"><i class="fa-solid fa-circle"></i></button>
<button class="text-red-500 w-7 border-2 border-BgLightBlue rounded-full hover:border-primary hover:bg-BgLightBlue"><i class="fa-solid fa-circle"></i></button>
<button class="text-purple-600 w-7 border-2 border-BgLightBlue rounded-full hover:border-primary hover:bg-BgLightBlue"><i class="fa-solid fa-circle"></i></button>
<button class="text-gray-300 w-7 border-2 border-BgLightBlue rounded-full hover:border-primary hover:bg-BgLightBlue"><i class="fa-solid fa-circle"></i></button>
<button class="text-black w-7 border-2 border-BgLightBlue rounded-full hover:border-primary hover:bg-BgLightBlue"><i class="fa-solid fa-circle"></i></button>
</div>
However, I realized that this approach was not efficient. So, I decided to simplify it using the v-for directive like this:
In template
<div class="p-2 border-2 border-blue-300 mr-auto rounded-full space-x-1">
<button v-for="level in LevelList" :key="level" :class="`text-${level} w-7 border-2 border-BgLightBlue rounded-full hover:border-primary hover:bg-BgLightBlue`"><i class="fa-solid fa-circle"></i></button>
</div>
In script
export default {
setup() {
const LevelList = ['white', 'yellow-400', 'orange-400', 'green-800', 'sky-500', 'red-500', 'purple-600', 'gray-300', 'black']
return {
LevelList,
}
}
}
After implementing this change, I noticed that the result was different. When I ran 'npm run dev', the output appeared as follows:
Am I missing something?