javascript - VueJS 抛出错误，因为一些数据还没有准备好

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>

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

Error in render: "TypeError: Cannot read property 'url' of undefined"

Cannot read property 'url' of undefined

我猜想因为 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 的真实图像 url 而不是“”，则 UI 可能会更好:

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