Загрузка спиннера не работает во время первого запроса GET, который выполняется на смонтированном

Question

В приведенном ниже коде вы можете видеть, что если isLoading имеет значение true, я рендерим компонент счетчика. По умолчанию isLoading имеет значение false, и перед каждым GET-запросом я устанавливаю значение true, а в конце GET-запроса, когда все загружено, я устанавливаю значение false.

Как ни странно, когда запросы GET в часах проходят, все работает нормально, и я вижу счетчик, пока не будет выполнен запрос GET, ОДНАКО, когда я монтирую компонент, я не вижу счетчик перед первым запросом GET, который сделано внутри крюка жизненного цикла mount (), и я понятия не имею, почему.

Я использовал console.log (this.isLoading) до и после установки isLoading в true, чтобы проверить, все ли в порядке, и кажется, что это так. Так почему же я не вижу счетчик перед первым GET-запросом на mount ()?

<div v-if='isLoading' class="spinner-container">
    <spinner></spinner>
 </div>
<div v-else>
    Content
</div>

<script>
    data(){
        return {
            sights: null,
            type: null,
            range: null,
            isLoading: false
        }
    },
    mounted(){
        this.isLoading = true
        axios.get('/getSights/' + this.lat + '/' + this.lng + '/' + this.type + '/' + this.range + '/' + this.nextPageToken)
        .then(response => {
            this.sights = response.data.result.results
            this.isLoading = false
        }).catch((error) => console.log(error));
    },
    watch: {
        type: function () {
            this.isLoading = true
            axios.get('/getSights/' + this.lat + '/' + this.lng + '/' + this.type + '/' + this.range)
            .then(response => {
                this.sights = response.data.result.results
                this.isLoading = false
            }).catch((error) => console.log(error));
        },
        range: function(){
            this.isLoading = true
            axios.get('/getSights/' + this.lat + '/' + this.lng + '/' + this.type + '/' + this.range)
            .then(response => {
                this.sights = response.data.result.results
                this.isLoading = false
            }).catch((error) => console.log(error));
        },
</script>

Answer 1

Вы должны подождать, пока все компоненты и дочерние компоненты будут обработаны. Подробнее здесь

Этот фрагмент должен работать для вашей смонтированной функции:

mounted() {
  this.$nextTick(()=> this.isLoading = true)
  axios.get('/getSights/' + this.lat + '/' + this.lng + '/' + this.type + '/' + this.range + '/' + this.nextPageToken)
  .then(response => {
    this.sights = response.data.result.results
    this.isLoading = false
  }).catch((error) => console.log(error));
},