0

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

            <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()
    }
}

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

2

1 ответ 1

0

Ответ оказался на поверхности. Нужно использовать стандартный метод: 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.