仅在需要时在 vue 中显示加载元素答案

【问题标题】：showing loading element in vue only when needed仅在需要时在 vue 中显示加载元素
【发布时间】：2021-09-17 07:07:05
【问题描述】：

我的vue代码如下：

    '<div v-if="team_members && team_members.length > 0">' +
    'screen1'
    '</div>' +
    '<div v-else>' +
    '<svg viewBox="0 0 50 50" class="spinner">' +
    '<circle class="ring" cx="25" cy="25" r="10"/>' +
    '<circle class="line" cx="25" cy="25" r="10"/>' +
    '</svg>' +
    'Screen is loading.' +
    '</div>' +

正如您在上面的代码中看到的，我使用条件渲染仅在 team_members 具有作为道具传递的值时渲染 screen1。注意：当我从 API 接收数据时，team_members 需要一段时间来加载，这就是为什么我目前使用 else 来显示屏幕正在加载，然后当 team_members 填充时，触发 if 循环。条件方面工作正常：如果 team_members 存在则显示 screen1，如果不存在则显示加载。我的下一个问题是，如果 team_members 确实没有任何价值，我不想显示加载元素。我只想让它说“没有可用的屏幕”。无论如何我可以检查一下组件是否仍在加载，甚至是计时器。通常 team_members 会在 1-2 分钟内加载，所以我可以在那里设置一个计时器检查。

让我知道我该怎么做。

【问题讨论】：

标签： javascript vue.js vuejs2 frontend

【解决方案1】：

您可以通过使用 vue-else-if 指令来实现这一点。您可以在 v-if 和 v-else 指令之间滑动。下面的代码应该适合你。

<div v-if="team_members && team_members.length>0">Screen 1</div>
<div v-else-if="!team_members">No Screen Available</div>
<div v-else>Screen is loading</div>

【讨论】：