Question

我是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>

图像已加载，但我的控制台返回两个错误：

渲染错误：“ TypeError：无法读取未定义的属性'url'”

无法读取未定义的属性“ url”

我猜想由于Axios调用是异步的，因此页面加载完成后所有内容都会到达，但加载后仍会加载。

正确等待数据可用的正确方法是什么？我尝试了一些我从React知道的东西，但是它根本没有加载（即使错误不再出现）

提前谢谢

Answer 1

您需要确保从组件诞生起就存在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的真实图片网址，而不是“'”，则用户界面可能会更好：

  data () {
    return {
      settings: {
        bio_bg: {
          url: 'http://via.placeholder.com/350x150',
        }
      },
      bio: {}
    }
  }

VueJS抛出错误，因为某些数据尚未准备好

1 个答案: