'What happen to this v-for directive

I wanted to make some object like below

enter image description here

So, at first I wrote code below

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

But, yes.. it's not efficient. So, I thought I can use v-for directive to make this code simply. like below.

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

However, result was no same. after wrote code, when I activated 'npm run dev' the result show like below.

enter image description here

what am I missing something?

htmlcssvue.js


Solution 1:[1]

by analyzing it seems like this problem is happening with all element of LevelList which have dash in their name.

it might be possible that javascript is treating for example yellow-400 as arithmetic expression (value of yellow) - 400 rather than a simple string

try renaming your multi-word elements and see if it works out !

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ht006

Related Questions