VUEJ在数据之前显示评估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>

因此，Actuall脚本没有问题，它可以加载用户并正确显示它。但是，在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>

Answer 2

我认为此代码更好：

<template>
  <div>
      <p v-for="user in users"> {{ user.name}} </p>
      <p v-if="isLoaded && user.length === 0"> No users found</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        isLoaded: false,
        users: []
      }
    },
    created() {
      var that = this 
      axios.get('...').then(response => {
          that.users = response.data
          that.isLoaded = true
      }).catch(error => { .... })
    }
  }
</script>