vue.js中的'无法读取未定义的属性'color1''错误

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.