vue.js - Vuejs 在数据之前显示评估 v-if

Question

好吧，这个问题很模糊，但我有一个看起来像这样的代码:

<template>
  <div>
      <p v-if="users" v-for="user in users"> {{ user.name}} </p>
      <p v-else> No users found</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        users: null
      }
    },

    created() {
      var that = this 
      axios.get('...').then(response => {
          that.users = response.data
      }).catch(error => { .... })
    }
  }
</script>

因此，实际脚本没有问题，它加载用户并正确显示。但是，在 vuejs 加载用户之前，我总是看到 No users founds。我不想看到这些消息，除非 users 是 null 但似乎 vue 在显示 v-else 之前不等待它为真。

有什么好的方法可以解决这个问题

Answer 1

不要为 if/else 使用用户，而是使用加载属性(无论如何你可能需要它来向用户呈现加载状态):

<template>
  <div>
      <p v-if="!loading && users.length" v-for="user in users"> {{ user.name}} </p>
      <p v-else> No users found</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        users: null,
        loading: true
      }
    },

    created() {
      var that = this 

      axios.get('...').then(response => {
          that.users = response.data
          that.loading = false
      }).catch(error => {that.loading = false .... })
    }
  }
</script>