开发者问题收集

无法读取未定义的属性“length”——为什么 DOM 在“created”之前尝试加载？

2020-12-29
71
vue.js

在我的应用程序中，我的模板中有以下内容： 

<template>
    <div>{{ report.imageId.length }}</div>
</template>

在我的脚本中： 

created() {
    this.loadReport();
},

methods: {
    async loadReport() {
        this.report = await reportSvc.getReport(this.$route.params.id);
    },
}

当我加载页面时，我在 DevTool 中收到错误“无法读取未定义的属性‘length’”。但是 HTML 确实打印了正确的数字。但是为什么会出现错误？

我假设错误是因为 DOM 尝试从“report”变量中读取，但由于 loadReport() 尚未完成，所以它会出现错误。但我认为“created”在 DOM 加载和呈现之前先出现？

这个问题不是如何让错误消失，我想知道为什么 DOM 在“created”之前加载。

3个回答

我认为你需要这个： 

async beforeMount() {
    await this.loadReport();
},
MotemaddeN
2020-12-29

在 created 钩子中，您可以访问处于活动状态但模板和虚拟 DOM 尚未安装或渲染的反应数据和事件。

如果您调用 API，但它不会等待结果，然后转到下一个生命周期钩子，情况如下：

  1. created 钩子启动，您可以访问反应数据和事件
  2. 您调用 API
  3. API 是异步的，因此代码继续，您到达 beforeMount 和 mounted 钩子，但由于尚未响应，数据尚未更新，DOM 渲染，您收到错误

传递错误的一种方法是在模板中使用这样的条件： 

{{ report.imageId ? report.imageId.length : '' }}

这样，您的用户就可以看到应用程序，并且如果响应需要很长时间，则不必等待响应当响应到来时，模板就会更新

hamid niakan
2020-12-29

只需添加一个 v-if 检查以确保数据存在： <div v-if="report">... 。

原因是您正在异步加载数据，因此在创建组件时数据不存在。

Daniel_Knights
2020-12-29