在 vue.js 上下文中无法从 mustache 中的 API 加载资源时如何不显示任何内容

Question

我是 Vue 新手，所以我想知道如何在无法从 API 加载资源时显示空白屏幕。下面是我在程序中使用的小胡子，其中变量来自 API.

<p class="text-2xl text-success">
    {{'+' + avgSwing.overall_performance + '%'}}%
</p>

所以当资源从API加载时，得到的输出是：

+36.14%

当资源从API加载失败时，得到的输出是：

+undefined%

所以，我期待的是空白屏幕而不是 +undefined%，请帮我解决这个问题。谢谢。

Answer 1

只要定义了 avgSwing.overall_performance，您发布的代码 {{'+' + avgSwing.overall_performance + '%'}} 肯定会起作用。检查控制台输出，如果您没有看到 + 和 %.[=13 包围的输出，则一定是出现了某种错误=]

胡子语法接受任何有效的 JavaScript 表达式，只有特定的 limitations.

Answer 2

您可以使用 v-if 执行此操作，以便仅在 API:

有响应时有条件地显示 <p>

<p class="text-2xl text-success" v-if="avgSwing">
   {{ '+' + avgSwing.overall_performance + '%' }}
</p>

如果未定义 avgSwing，则不会将 <p> 标记添加到 DOM。

How to display nothing when resource fails to load from the API in mustache in the context of vue.js