Почему style background vue3 не применяется?

Question

[Daniil]

Использую Vue3. Мне нужно создать 6 блоков с разными цветами. 6 блоков создаются , но без цвета. Делаю как в документации, но не работает. В чём может быть проблема?

<template>
                <div
                    class="elem-color"
                    v-for="(index, bgColor) in colorArray"
                    :key="index"
                    :style="{ color: bgColor }"
                ></div>
</template>
<script>
export default {
    name: 'ChangeName',
    setup() {
        const colorArray = [
            '#F03F35',
            '#005397',
            '#32B67A',
            '#9357A9',
            '#EAEAEA',
        ];
        return {
            colorArray,
        };
    },
};

</script>
<style lang="scss" scoped>
           .elem-color {
                margin: 0.5em 0.5em 0 0;
                width: 30px;
                aspect-ratio: 1/1;
                border-radius: 50%;
             
            }
</style>

Answer 1

[0xD34F]

нужно создать 6 блоков с разными цветами

:style="{ color: bgColor }"

Цветами ЧЕГО? Свойство color - это цвет текста, никакого текстового содержимого в блоках нет.

Делаю как в документации

v-for="(index, bgColor) in colorArray"

Ну конечно, как в документации. Там ведь тоже элемент массива и его индекс местами перепутаны. Или всё-таки нет?

Answer 2

[Дима Паутов]

так может свойство colorзаменить на backgroundColor?

а так же заменить это:
v-for="(index, bgColor) in colorArray"

на это
v-for="(bgColor, index) in colorArray"