Vue Warn the client side rendered virtual DOM tree is not matching server-rendered content

问题

I'm trying to loop a tr within a table with Vue.js and Nuxt. But when I load the page I get the following error

vue.runtime.esm.js?2b0e:619 [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
, or missing . Bailing hydration and performing full client-side render.

When I remove the table from the following block of code from my HTML the error disappears. How can this be happening? I checked all closing tags and they seem to be matching. What is happening here?

In Template

<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>

In Script

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

Here is my rendered html

Html

回答1:

Marvin Rudolph helped me out on the Nuxt discord. I needed to add a tbody around my tr and the error was gone

回答2:

make sure to wrap your component markup with a template/container no other element should be outside the template/container. for example:

<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>

no element should be outside the #app tag

回答3:

The object you are trying to loop over is not correct as it should be for a v-for the rendered html shows [object Object] as value of each tag, try this instead

<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>

if this does not solves the problem you can use the tag as suggested here

回答4:

The answer depends on the version of your nuxt project. If the version is v<2.9.0, wrap your table with no-ssr tag. Otherwise use client-only tag like below:

version < 2.9.0:

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

version > 2.9.0

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

Tip: pay attention that no-ssr is going to be removed in nuxt 3.

来源：https://stackoverflow.com/questions/59948635/vue-warn-the-client-side-rendered-virtual-dom-tree-is-not-matching-server-render

标签

html

Vue.js

nuxt.js