Vue Предупредить, что отображаемое на стороне клиента виртуальное дерево DOM не соответствует отображаемому на сервере содержимому - PullRequest
Новая
       34

Vue Предупредить, что отображаемое на стороне клиента виртуальное дерево DOM не соответствует отображаемому на сервере содержимому

0 голосов
/ 28 января 2020

Я пытаюсь l oop tr в таблице с Vue. js и Nuxt. Но когда я загружаю страницу, я получаю следующую ошибку

vue .runtime.esm. js? 2b0e: 619 [Vue warn]: виртуальное дерево DOM, отображаемое на стороне клиента не соответствует отображаемому на сервере содержимому. Вероятно, это вызвано неправильной разметкой HTML, например, вложением элементов уровня блока внутри

, или отсутствием. Отказ от гидратации и выполнение полного рендеринга на стороне клиента.

Когда я удаляю таблицу из следующего блока кода из моего HTML, ошибка исчезает. Как это может происходить? Я проверил все закрывающие теги, и они, кажется, совпадают. Что здесь происходит?

В шаблоне 

<template>
  <ContentBlock id="statistics" class="content-light"> 
      <div class="content-grid-light">
          <div class="content-grid-item-1">
              <div>
                  <table class="table">
                      <tr v-for="(statistic, index) in statistics" :key="index" :value="statistic">
                        <th class="table-cell">{{statistic.key}}</th>
                        <td class="table-cell statistic-value">{{statistic.value}}</td>
                      </tr>
                  </table>
              </div>
          </div>
      </div>
  </ContentBlock>
</template>

В скрипте 

  data(){
    return{
      statistics: [
        {key:"TestKey1", value:"TestValue1"},
        {key:"TestKey2", value:"TestValue2"},
        {key:"TestKey3", value:"TestValue3"},
        {key:"TestKey4", value:"TestValue4"},
      ],
    }
  },

Вот мой перевод html

Html

Ответы [ 4 ]

0 голосов
/ 28 января 2020

Марвин Рудольф помог мне в разладе Nuxt. Мне нужно было добавить tbody вокруг моего tr, и ошибка исчезла

0 голосов
/ 28 января 2020

Объект, который вы пытаетесь переместить на * oop, неправильный, как и должно быть для визуализованного v-объекта html показывает [объект Object] в качестве значения каждого тега, попробуйте это вместо 

<template>
  <ContentBlock id="statistics" class="content-light"> 
      <div class="content-grid-light">
          <div class="content-grid-item-1">
              <div>
                  <table class="table">
                      <tr v-for="(statistic, index) in statistics" :key="statistic.key" :value="statistic.value">
                         <th class="table-cell">{{statistic.key}}</th>
                         <td class="table-cell statistic-value">{{statistic.value}}</td>
                      </tr>
                  </table>
              </div>
          </div>
      </div>
  </ContentBlock>
</template>

если это не решит проблему, вы можете использовать предложенный тег здесь

0 голосов
/ 28 января 2020

Ответ зависит от версии вашего проекта nuxt. Если версия v <2.9.0, оберните вашу таблицу тегом no-ssr. В противном случае используйте только клиентский тег, как показано ниже: </p>

версия <2.9.0: </p> 

<no-ssr>
   <table></table>
</no-ssr>

версия> 2.9.0 

<client-only>
  <table></table>
</client-only>

Совет: обратите внимание, что нет -ssr будет удален в nuxt 3.

0 голосов
/ 28 января 2020

убедитесь, что обернули разметку вашего компонента шаблоном / контейнером. Никакой другой элемент не должен находиться вне шаблона / контейнера. например: 

<template>
   <div id="app">
     <table class="table">
      <tr v-for="(statistic, index) in statistics" :key="index" :value="statistic">
        <th class="table-cell">{{statistic.key}}</th>
        <td class="table-cell statistic-value">{{statistic.value}}</td>
      </tr>
     </table>
   </div>
</template>

ни один элемент не должен быть за пределами тега #app

...