时间戳

首页 > 解决方案 > 我有一个 TypeError 警告，但应用程序运行良好

vuejs2 - 我有一个 TypeError 警告，但应用程序运行良好

问题描述

突然，我开始从 Vue 收到以下 TypeError 警告，但我的应用程序运行良好

[Vue 警告]：渲染错误：“TypeError：无法读取属性 'Name' of null”

这来自名为“仪表板”的数据属性，该属性在用户从下拉列表中选择项目后通过 AJAX 调用加载。在调试中，我已经能够简化代码以获取警告并学习如何不获取警告。

这条线会给我警告，但工作正常

仪表板：{{dashboard.Name}}

此行将显示整个仪表板对象，没有警告

仪表板：{{仪表板}}

这条线也可以正常工作，没有警告

仪表板：{{ 仪表板 == null ？“空”：dashboard.Name}}

我正在使用 Vue 做我的第一个项目，并且这段代码已经运行了几个星期，没有任何警告。

为什么我突然开始看到这个警告？

第二个问题是您通常如何追踪此类警告。堆栈跟踪都在 Vue 代码中，让我不知道问题出在我的代码中的位置。

标签： vuejs2

解决方案

Vue 团队在其论坛的回答中对此进行了解释。我将在下面重复一个较短的版本，因为它需要一段时间才能进入我的厚脑袋。

当 Vue 进行渲染并且数据状态尚未完成时，将发出 TypeError，在我的情况下，异步 AJAX 调用尚未设置数据。当 AJAX 调用确实返回数据反应性并再次完成渲染时，这一次数据处于有效状态。

这解释了为什么下面有一个 TypeError 但渲染得很好

仪表板：{{dashboard.Name}}

TypeError 是因为 Vue 试图在初始渲染时渲染 null.Name，即仪表板最初设置为 null。在 AJAX 调用返回后，仪表板现在已设置，Vue 反应性开始，第二次渲染按预期工作。

下面的内容不会发出 TypeError 警告，因为访问\呈现 null

仪表板：{{仪表板}}

在 AJAX 调用返回响应性后，没有任何要渲染的内容是有效的，因此会导致重新渲染，并按预期显示数据。

决议，引用自上述帖子。

一般来说，您会在您的组件或可能需要该信息的数据周围放置条件渲染，并使用 v-if 语句来触发真实表达式。因为 null 是“假的”。当 ajax 填充它时，它就变得“真实”了</p>

推荐阅读