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>

因此,actuall脚本没有问题,它加载用户并正确显示它.但是,我总是看到No users founds之前vuejs加载用户.我不想看到那些消息,除非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>