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

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

0 голосов
/ 22 марта 2019

Я делаю сайт с 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 Ответ

1 голос
/ 22 марта 2019

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

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

...