'Cannot read property 'color1' of undefined' error in vue.js

Question

I am making a website with storyblok, vue and nuxt. In my component, I am trying to change the background color of the component by getting a value out of the storyblok API and getting the right HEX code in my object. However, I can't seem to find what is going wrong, I am getting this error.

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)

I would really appreciate if someone could help me with this error. This is my code:

The div I am trying to change the background color of:

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

My object in the data() function:

methods: {

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

    }

My computed function:

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

Answer 1

this.colors is undefined because your data() is inside the methods hook. Define the data hook outside the methods hook.

When you look for this.colors, it will look for the property colors defined inside the data hook. And when you look for a method for eg. this.myMethod(), it will look for the method inside the methods or computed hook as necessary.