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>

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

2 个答案: