我是 VueJS 的新手,我想添加一张从 API 加载的图片作为背景图片。但是,图像加载最终会起作用。
代码如下:
<template>
<div id="bio" :style="{ backgroundImage: 'url(' + this.settings.bio_bg.url +')' }">
<h1>Biography</h1>
<router-link to="/">Home</router-link><br />
<span>Biography</span><br />
<router-link to="/shop">Shop</router-link><br />
<router-link to="/contact">Contact</router-link><br />
</div>
</template>
<style scoped>
</style>
<script>
export default {
data () {
return {
settings: {},
bio: {}
}
},
created () {
.catch(error => this.setError(error))
this.$http.secured.get('/settings')
.then(response => {
this.settings = response.data
console.log(this.settings)
})
.catch(error => this.setError(error))
}
}
</script>
图像已加载,但我的控制台返回两个错误:
Error in render: "TypeError: Cannot read property 'url' of undefined"
Cannot read property 'url' of undefined
我猜想因为 Axios 调用是异步的,页面加载完成后一切都到达,但之后仍然加载。
正确等待数据可用的正确方法是什么?我尝试了一些我从 React 知道的东西,但它根本没有加载(即使错误不再出现)
提前致谢
最佳答案
你需要确保 this.settings.bio_bg.url
从组件诞生时就存在,这样编译器就不会在尝试渲染它时崩溃。为此,只需在组件的原始 data
中设置一个“假”url:
export default {
data () {
return {
settings: {
bio_bg: {
url: '',
}
},
bio: {}
}
},
created () {
this.$http.secured.get('/settings')
.then(response => {
this.settings = response.data
console.log(this.settings)
})
.catch(error => this.setError(error))
}
}
这不仅可以防止错误,还可以提供更好的智能感知,因为现在您的代码编辑器可以知道 settings
有一个 bio_bg
成员,而该成员又有一个 url
。
如果您提供一个带有占位符 img 的真实图像 url 而不是“”,则 UI 可能会更好:
data () {
return {
settings: {
bio_bg: {
url: 'http://via.placeholder.com/350x150',
}
},
bio: {}
}
}
关于javascript - VueJS 抛出错误,因为一些数据还没有准备好,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51802456/