Style Binding makes app no show up anymore in Vue

Tags: , , ,

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

Not Working

(No divs with id=app!)

Code: index.html

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

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

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

            <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'
                 @mouseover='changeColor(color.image)' class='color-box'
                 :style='{ background-color: color.text }'>

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

    <script src=''></script>
    <script src='main.js'></script>


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) {
            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 }

    return array2

function toTitleCase(str) {
    return str.replace(
        function(txt) {
            return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();


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

Source: stackoverflow