Style Binding makes app no show up anymore in Vue

What I’m trying to do is to make small 20px x 20px boxes of different colors in Vue. But, whenever I try to do :style='{ background-color: color.text }' (color is an object in the data with property text), it just breaks the app and it shows up with nothing.

Sceenshot without :style='{ background-color: color.text }'

Screenshot of inspector with :style='{ background-color: color.text }'

(No divs with id=app!)

Code: index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Learning</title>
</head>
<body>
    <style>
        [v-cloak] {
            display: none;
        }
        .color-box {
            height: 20px;
            width: 20px;
        }
    </style>

    <div v-cloak id='app'>
        <div id='product'>
            <h1>{{ product }}</h1>

            <div class='product-image'>
                <img :src='image'>
            </div>

            <p v-if='inventory >= 50'>In stock</p>
            <p v-else-if='10 <= inventory && inventory < 50'>Almost in stock</p>
            <p v-else-if='inventory < 10'>Almost out of stock</p>
            <p v-else-if='inventory == 0'>Out of stock</p>

            <h3>Comes in the colors:</h3>
            <div v-for='color in colors'
                 :key='color.id'
                 @mouseover='changeColor(color.image)' class='color-box'
                 :style='{ background-color: color.text }'>
            </div>

            <button @click='addToCart'>Add to cart</button>
            <button @click='removeFromCart'>Remove item from cart</button>
            <p># of items in cart: {{ cart }}</p>
        </div>
    </div>

    <script src='https://cdn.jsdelivr.net/npm/vue'></script>
    <script src='main.js'></script>
</body>
</html>

main.js

let app = new Vue({
    el: '#app',
    data: {
        product: 'Socks',
        image: '',
        inventory: 9,
        colors: idify([
            {
                text: "green",
                image: 'socks.jpg'
            },
            { 
                text: "blue",
                image: 'blue-socks.jpg'
            }
        ]),
        cart: 0,
    },
    methods: {
        addToCart() { // ES6 shorthand for "addToCart: function() {"
            this.cart += 1
        },
        removeFromCart() {
            if (!this.cart) {
                return;
            }
            this.cart -= 1
        },
        changeColor(image) {
            this.image = image
        },
    }
})

app.image = app.colors[0].image

function idify(array) {
    let idcount = 0

    let array2 = []
    for (let value of array) {
        let obj = { id: idcount, ...value }
        array2.push(obj);
        idcount++;
    }

    return array2
}

function toTitleCase(str) {
    return str.replace(
        /wS*/g,
        function(txt) {
            return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
        }
    );
}

Answer

background-color is not a valid property name in the object literal syntax because of the -.

You can fix it in these ways:

:style="{ backgroundColor: color.text }" (Vue-specific)
:style="{ 'background-color': color.text }"

Advertisement

Answer