javascript - VueJS if/else : the else loads first, 然后 if 加载

Question

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

详情:我有一个定制的在线商店和许多不同的市场。我从我的服务器返回一个项目计数，如果该数字为零，那么我说该国家/地区没有项目，换句话说，该国家/地区尚未对这家商店开放。如果数字不为零，则不显示消息并实际显示项目。

这是我的代码的精简版:

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() 或 created () 或 beforeMount() 我得到相同的结果。

Answer 1

除了在数据解析后处理空项目计数之外，您还需要处理没有数据要计数的情况。你没有提到使用 Vue Router，但是 this discussion of handling async data仍然适用:您可以使用 beforeMount 或 beforeRouteEnter Hook 让异步获取完全阻止组件呈现，或者将所有项目列表标记包装在另一个条件中，它仅在您的数据被获取后呈现，并且诸如 isLoaded(本地状态)设置为 true。