Рендеринг данных из апи на клиенте nuxt.js

Question

Столкнулся с проблемой: При загрузке страницы отправляю запрос на получение данных, пока отвеот не пришёл, показываю лодер( использую скелетоны). Когда ответ пришел меняю лодер на блоки с данными.

            <template>
                    <div v-if="loading" class="loading">
                        <v-skeleton-loader v-for="item in 9" :key="item" type="card" class="loading-item"></v-skeleton-loader>
                    </div>
                    <div v-else>
                        <div v-for="(item, index) in this.dataMass" :key="index">
                            {{item.name}}
                        </div>
                    </div>
            </template>
        
        <script>
        import ApiService from "../common/api.service";
        
        export default {
            name: "test",
            data() {return {loading: true, dataMass:[], params: {option:1}}
            methods: {
            getData(){
                    ApiService.post("/test", this.params).then(response => {
                            const resp = response.data;
                            this.dataMass = resp
                        })
        }}
    mounted(){
    this.getData()
    }
}

Проблема в том, что при просмотре кода через "просмотр кода страницы", видны только блоки скелетонов. Как можно решить эту проблему?

Answer 1

Ответ оказался на поверхности. Нужно использовать стандартный метод: AsyncData. Ссылка на документацию.

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.description }}</p>
  </div>
</template>

<script>
  export default {
    async asyncData({ params, $http }) {
      const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
      return { post }
    }
  }
</script>

БЛОГ НА HUSL

Рендеринг данных из апи на клиенте nuxt.js

Ответы (1 шт):