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

Question

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

vue.runtime.esm.js?2b0e:619 [Vue 警告]：客户端渲染 虚拟 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

Answer 1

Marvin Rudolph 帮助我解决了 Nuxt discord。我需要在我的 tr 周围添加一个 tbody 并且错误消失了

Answer 2

答案取决于您的 nuxt 项目的版本。如果版本是 v

版本

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

版本 > 2.9.0

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

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

Answer 3

确保使用模板/容器包装您的组件标记，任何其他元素都不应位于模板/容器之外。 例如：

<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 标签之外

Answer 4

您尝试循环的对象不正确，因为它应该是 v-for 呈现的 html 将 [object 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>

如果这不能解决问题，您可以按照建议使用标签here