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

Posted 2023-02-22

【中文标题】Vue 警告客户端渲染的虚拟 DOM 树与服务器渲染的内容不匹配

【英文标题】：Vue Warn the client side rendered virtual DOM tree is not matching server-rendered content

【发布时间】：2020-05-13 20:40:46

【问题描述】：

我正在尝试使用 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

【参考方案1】：

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

【参考方案2】：

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

版本

<no-s-s-r>
   <table></table>
</no-s-s-r>

版本 > 2.9.0

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

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

【讨论】：

这不起作用如果您使用的是 Nuxt

将在 Nuxt 3 中删除。

所以我要根据版本编辑我的答案

这只是禁用 s-s-r

【参考方案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 标签之外

【讨论】：

我有。我只给出了表格部分，因为这似乎很相关。但我添加了完整的模板。我得到了错误。

【参考方案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

【讨论】：

但我希望它在服务器端呈现。为什么不能呢？

@OneDayFly 您尝试循环的对象不正确，因为它应该是 v-for 呈现的 html 将 [object Object] 显示为每个 <tr> 标记的值

我希望它在服务器端渲染或有充分的理由无法完成。

@OneDayFly 答案已更新，请检查现在一切都将在服务器端呈现

这里是呈现的 html snipboard.io/CtE4Nr.jpg 仍然会产生错误