这个v-for指令发生了什么？

Question

我想做一些像下面这样的东西

​

​

所以，一开始我写了下面的代码

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

但是，是的..。效率不高。所以，我想我可以使用v指令来简单地编写这个代码。就像下面。

内模板

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

在剧本中

export default {
    setup() {

        const LevelList = ['white', 'yellow-400', 'orange-400', 'green-800', 'sky-500', 'red-500', 'purple-600', 'gray-300', 'black']

        return {
            LevelList,
        }
    }
}

然而，结果却不尽相同。在编写了代码之后，当我激活'npm‘时，结果如下所示。

​

​

我漏掉了什么？

Answer 1

通过分析，这个问题似乎发生在LevelList的所有元素上，这些元素都以它们的名义出现了破折号。

例如，javascript可能将黄色-400视为算术表达式(value of yellow) - 400，而不是简单的字符串。

尝试重命名你的多词元素，看看它是否有效！