Refresh page with nuxtjs dont update view

Question

I create one page with this code:

page: \session_id.vue

<template>
  <div>
    <v-skeleton-loader v-if="isLoading" boilerplate type="article, actions"> </v-skeleton-loader>
    <v-container v-else fluid>
      <v-row>
        <v-col cols="12">
          <v-btn icon color="black" @click="voltar">
            <v-icon>mdi-undo</v-icon>
          </v-btn>
        </v-col>
      </v-row>
      <v-row align="center">
        <v-col cols="12" sm="1">
          <v-avatar tile>
            <v-img :src="'data:image/png;base64,' + sessao.usuario.avatar"></v-img>
          </v-avatar>
        </v-col>
        <v-col cols="12" xl="7" lg="7" md="7" sm="7">
          <span class="ml-2">{{ sessao.usuario.nome }}</span>
        </v-col>
        <v-col sm="4" class="d-flex justify-end">
          <v-btn icon>
            <v-icon>
              {{ iconeFotografo }}
            </v-icon>
          </v-btn>
          <v-btn icon class="ml-2">
            <v-icon>
              mdi-account-search-outline
            </v-icon>
          </v-btn>
          <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn icon color="blue" v-bind="attrs" v-on="on">
                <v-icon>mdi-share</v-icon>
              </v-btn>
            </template>
            <span>{{$t('compartilhar.fotografo')}}</span>
          </v-tooltip>
        </v-col>
      </v-row>
      <v-row align="center">
        <v-col cols="12" sm="1">
          <v-avatar tile>
            <v-icon>
              mdi-beach
            </v-icon>
          </v-avatar>
        </v-col>
        <v-col cols="12" xl="7" lg="7" md="7" sm="7">
          <span class="ml-2">
            {{ sessao.praia.nome }} - {{ sessao.praia.cidade }} / {{ sessao.praia.uf }} -
            {{
              new Date(sessao.inicio).toLocaleDateString('pt-Br', {
                weekday: 'long',
                year: '2-digit',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
              }) +
                ' ate ' +
                new Date(sessao.fim).getHours() +
                ':' +
                new Date(sessao.fim).getMinutes()
            }}
          </span>
        </v-col>
        <v-col sm="4" class="d-flex justify-end">
          <v-btn icon>
            <v-icon>
              {{ iconePraia }}
            </v-icon>
          </v-btn>
          <v-btn icon class="ml-2">
            <v-icon>
              mdi-account-search-outline
            </v-icon>
          </v-btn>
        </v-col>
      </v-row>
      <Fotos :sessao="sessao" />
    </v-container>
  </div>
</template>

<script>
export default {
    data() {
        return {
            sessao: null,
            isLoading: true,
            iconeFotografo: null,
            iconePraia: null
        }
    },
    async fetch() {
        this.fetchFotos();
    },
    methods: {
        fetchFotos(){
          this.isLoading = true;
            this.$api.get(`/sessao/${this.$route.params.id}`).then(response => {
                this.sessao = response.data;
                this.isLoading = false;;
            });
        },
        voltar() {
            this.$router.go(-1);
        }
    }
};
</script>

So if I navigate to the page (/session/1) he shows the v-skelecton-loader, then the method fetch are executed, and my page are updated, but if I reload my page (command + F5 or click in button refresh) the v-skeleton-loader shows, the fetch method are executed(I see in my api) but the v-skelecton-loader sill there, if I put in my template {{isLoading}} he first show true, then show false but the page dont react to that change, I need to back the page and enter again to reload page.

why this happen? It`s correctly in nuxtjs?

tks

kissu kissu · Accepted Answer · 2021-02-12T00:54:17

You should probably just use the $fetchState.pending rather than your isLoading state. Since it's a duplicate and that the fetch() hook just handles it by itself.

Also, why do you not write your whole logic in the fetch() hook ? Make it async/await and it will work great (there is no await in your code, you're using then at a place) !

Here is an example on how to handle the loading state while fetching an API thanks to the fetch hook: https://codesandbox.io/s/use-nuxt-fetch-hook-on-api-5ymdz?file=/pages/index.vue

Refresh page with nuxtjs dont update view

1 Answers