@bormor

Ошибка «The client-side... DOM tree is not matching server-rendered content.» при использовании v-if="!$apollo.loading". В чем возможная причина?

При использовании модуля nuxt-apollo появляется ошибка
client.js:730 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.


Локализуя ее обнаружил что появляется при использоании в v-if="!$apollo.loading"

В чем возможная причина? Как корректно рендерить TheHeader после загрузки данных через Apollo?

Упрощенный пример:
// dafault.vue
<template>
   <div>
      <!-- Если убрать v-if="!$apollo.loading" проблема пропадает -->
      <TheHeader v-if="!$apollo.loading" />
   </div>
</template>

<script>
import gql from 'graphql-tag';
import TheHeader from '~/components/TheHeader';

export default {
   components: {
      TheHeader,
   },

   apollo: {
      categories: {
         query: gql`
            query {
               categories {
                  id
                  label
                  url
               }
            }
         `,
         update: (data) => data.categories,
      },
   },
};
</script>

// TheHeader.vue
<template>
   <div>header</div>
</template>
  • Вопрос задан
  • 38 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
22 окт. 2020, в 06:46
3000 руб./за проект
21 окт. 2020, в 22:40
300 руб./за проект
21 окт. 2020, в 22:34
25000 руб./за проект