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

Question

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

Shadi Farzankia · Accepted Answer · 2020-01-28 14:58:05Z

3

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.

edited Jan 28, 2020 at 14:58

answered Jan 28, 2020 at 14:12

Shadi Farzankia

7471 gold badge9 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Awais fiaz Over a year ago

this won't work If you are using a version of Nuxt < v2.9.0, in that case use <no-ssr>

Shadi Farzankia Over a year ago

<no-ssr> is going to be removed in Nuxt 3.

Shadi Farzankia Over a year ago

so Im going to edit my answer according to the version

kovan Over a year ago

That just disables SSR

OneDayFly · Accepted Answer · 2020-01-28 14:17:54Z

2

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

answered Jan 28, 2020 at 14:17

OneDayFly

1012 silver badges10 bronze badges

Comments

Medvik · Accepted Answer · 2020-01-28 12:30:18Z

0

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

answered Jan 28, 2020 at 12:30

Medvik

851 silver badge7 bronze badges

1 Comment

OneDayFly Over a year ago

I have that. I only gave the table part because that seemed relevant. But I added the full template. And I get the error with that.

Awais fiaz · Accepted Answer · 2020-01-28 13:01:22Z

0

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

edited Jan 28, 2020 at 13:01

answered Jan 28, 2020 at 12:43

Awais fiaz

3901 gold badge7 silver badges20 bronze badges

7 Comments

OneDayFly Over a year ago

But I want this to be server side rendered. Why couldn't it be?

Awais fiaz Over a year ago

@OneDayFly 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 <tr> tag

OneDayFly Over a year ago

I want it to be server side rendered or have a good reason why it couldn't be done.

Awais fiaz Over a year ago

@OneDayFly answer is updated please check now everything will be server side rendered

OneDayFly Over a year ago

Here is the rendered html snipboard.io/CtE4Nr.jpg that still generates the error

|

Collectives™ on Stack Overflow

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

4 Answers 4

4 Comments

Comments

1 Comment

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related