Привязка к стилю делает приложение больше не доступным в Vue - PullRequest
Новая
       14

Привязка к стилю делает приложение больше не доступным в Vue

0 голосов
/ 16 апреля 2020

То, что я пытаюсь сделать, - это сделать маленькие коробки 20px x 20px разных цветов в Vue. Но всякий раз, когда я пытаюсь сделать :style='{ background-color: color.text }' (цвет - это объект в данных с текстом свойства), он просто разрывает приложение и ничего не показывает.

Sceenshot без :style='{ background-color: color.text }'

Working

Снимок экрана инспектора с :style='{ background-color: color.text }'

Not Working

(без делений с идентификатором = приложение!)

Код: индекс. 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(
        /\w\S*/g,
        function(txt) {
            return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
        }
    );
}

1 Ответ

2 голосов
/ 16 апреля 2020

background-color не является допустимым именем свойства в литеральном синтаксисе объекта из-за -.

. Это можно исправить следующими способами:

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