Question

问题： VueJS在“if”条件加载之前简要显示“else”条件。这会给用户带来意想不到的体验，因为当“if”是真的时，他们永远不会看到“其他”。如果“if”为真，他们应该只看到“if”。

细节：我有一个定制的在线商店和许多不同的市场。我从我的服务器取回一个项目数，如果该数字为零，那么我说该国家没有项目，换句话说该国家尚未开放。如果该数字不为零，则不显示该消息并实际显示该项目。

以下是我的代码的精简版：

HTML

<div v-if="count !== 0">Items are in the store, here they are!</div>
<div v-else>Sorry no items in the store.</div>

JS

mounted() {
  // Checks the location and gets items from server.
  if (this.location) {
    this.getItemsForHomeView();
  }
}

我发现了这一点：Understanding Vue.js Lifecycle Hooks但它没有帮助，因为当我尝试将该功能移出mounted()并进入任何较早的功能时，例如beforeCreate()或{{ 1}}或created()我得到相同的结果。

Answer 1

除了在数据解决后处理空项目计数外，还需要处理没有数据需要计算的情况。您没有提到使用Vue Router，但this discussion of handling async data仍然适用：您可以使用异步提取来阻止组件完全呈现，使用B或beforeMount挂钩或换行所有项目列表标记在另一个条件中，仅在获取数据后呈现，并且beforeRouteEnter（本地状态）等设置为true。

VueJS if / else：else首先加载，然后if加载

1 个答案: