Ошибка "Не удается прочитать свойство" color1 "из неопределенного" в файле vue.js

Я делаю сайт с storyblok, vue и nuxt. В моем компоненте я пытаюсь изменить цвет фона компонента, получая значение из API storyblok и получая правильный HEX-код в моем объекте. Тем не менее, я не могу найти, что идет не так, я получаю эту ошибку.

TypeError: Cannot read property 'color1' of undefined
at VueComponent.backgroundColor (app.js:6239)
at Watcher.get (commons.app.js:25459)
at Watcher.evaluate (commons.app.js:25564)
at VueComponent.computedGetter [as backgroundColor] (commons.app.js:25814)
at Object.get (commons.app.js:23107)
at Proxy.render (app.db592a6f79c830fedfca.hot-update.js:55)
at VueComponent.Vue._render (commons.app.js:24557)
at VueComponent.updateComponent (commons.app.js:25048)
at Watcher.get (commons.app.js:25459)
at Watcher.run (commons.app.js:25534)

Буду очень признателен, если кто-нибудь сможет мне помочь с этой ошибкой. Это мой код:

Div я пытаюсь изменить цвет фона:

<div class="column image" :style="{ backgroundColor: backgroundColor}">
    <div class="image" :style="{ paddingTop: getRatio }">
        <img class="lazyload" :src="blok.image"/>
    </div>
</div>

Мой объект в функции data():

methods: {

        data()
        {
            return {
                colors: {
                    color1: '#ffffff',
                    color2: '#5646F2',
                    color3: '#000000'
                }
            }
        }

    }

Моя вычисляемая функция:

backgroundColor() {
    return !this.blok.color ? this.colors.color1 : this.colors[this.blok.color];
}

1 ответ

Решение

this.colors не определено, потому что ваш data() находится внутри methods крюк. Определите data зацепить за methods крюк.

Когда ты ищешь this.colors, будет искать недвижимость colors определены внутри data крюк. И когда вы ищете способ, например. this.myMethod(), он будет искать метод внутри methods или же computed крючок по необходимости.

Другие вопросы по тегам