html - Vue 警告客户端渲染的虚拟 DOM 树与服务器渲染的内容不匹配

Question

我正在尝试使用 Vue.js 和 Nuxt 在表格中循环 tr。但是当我加载页面时，出现以下错误

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.

当我从我的 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

Answer 1

答案取决于您的 nuxt 项目的版本。如果版本是 v<2.9.0，请使用 no-ssr 标记包装您的表。否则使用 client-only 标签如下:

版本 < 2.9.0:

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

版本 > 2.9.0

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

提示:注意在nuxt 3中no-ssr将被移除。