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

Question

我正在用 storyblok、vue 和 nuxt 制作一个网站。在我的组件中，我试图通过从 storyblok API 中获取一个值并在我的对象中获取正确的 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];
}

Answer 1

this.colors 未定义，因为您的 data() 在 methods 钩子内。在 methods 钩子之外定义 data 钩子。

当您查找 this.colors 时，它会查找 data 钩子中定义的属性 colors。当您寻找一种方法时，例如。 this.myMethod()，它会根据需要在 methods 或 computed 钩子中寻找方法。

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

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

javascript

vue.js

storyblok

nuxt.js

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

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

javascript

vue.js

storyblok

nuxt.js

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