Ошибка 'Не удается прочитать свойство' color1 'of undefined' в 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];
}

javascript vue.js nuxt.js storyblok
person Stefan de Boer    schedule 22.03.2019    source источник
comment
Я не уверен, вызывает ли это проблема, но поле data() должно находиться за пределами methods, чтобы шаблон vue использовал значения   -  person VladNeacsu    schedule 22.03.2019
comment
Вы определили data внутри объекта methods.   -  person Varit J Patel    schedule 22.03.2019
comment
Возможно, вы потеряли контекст this в backgroundColor функции, в этом случае вам следует привязать функцию или использовать стрелочную функцию.   -  person lankovova    schedule 22.03.2019

Ответы (1)


arrow_upward
1
arrow_downward

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

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

person Bhojendra Rauniyar    schedule 22.03.2019