代码之家 › 专栏 › 技术社区 › Jaeger

VueJS抛出错误,因为某些数据尚未就绪

vue.js asynchronous javascript

Jaeger · 技术社区 · 6 年前

代码如下:

<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调用是异步的,所有的东西都是在页面完成加载之后到达的,但之后仍然加载。

提前谢谢你

1 回复 | 直到 6 年前

Sergeon 6 年前

你要确定 this.settings.bio_bg.url 存在于组件生成中,所以编译器不会试图渲染它。为了做到这一点,只需在原始的 data 组成部分:

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: {}
    }
  }

推荐文章

Coding Dog · Python异步函数不工作。继续跑

1 年前

Gourav Srivastava · 我应该如何使用回调来获得期望的结果?

2 年前

cyka · 强制JavaScript等待单击(循环)

2 年前

CodeMonkey · 无法访问React[重复]中的对象值

2 年前

Tim · 为异步方法返回列表的最佳方式是什么?

2 年前

Annity · Vuetify v-edit-dialog以异步更改数据表值

2 年前

dapidmini · 未捕获的承诺嵌套异步函数承诺错误处理

2 年前

Andres533 · 将参数传递给async/await函数将返回“undefined”

2 年前

chloepark · Promise、await/async和setTimeout之间有什么区别?

2 年前

mr_noob123 · 在discord python中,如何在命令内部调用异步函数?

2 年前