데이터 전 평가 v-if를 보여 주는 Vuej

데이터 전 평가 v-if를 보여 주는 Vuej

질문이 애매한데 이렇게 생긴 코드가 있어요

<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>

따라서 실제 스크립트는 문제가 없으며 사용자를 로드하여 올바르게 표시합니다.하지만, 나는 항상 그것을 본다.No users foundsvuejs가 사용자를 로드하기 전에.그 메세지는 보고 싶지 않아요.users이null하지만 Vue는 그것이 사실일 때까지 기다리지 않고v-else.

이 문제를 해결할 방법이 있을까요?

if/else에 사용자를 사용하는 대신 Loading 속성을 사용합니다(사용자에게 로드 상태를 표시하기 위해 반드시 필요합니다).

<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>

이 코드가 더 나은 것 같습니다.

<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>

언급URL : https://stackoverflow.com/questions/46401811/vuejs-showing-evaluation-v-if-before-data