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不和谐问题。我需要在tr周围加上一个tbody，错误消失了

Answer 2

确保使用模板/容器包装组件标记，模板/容器外不应有其他元素。例如：

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

您要遍历的对象是不正确的，因为它应该是v-，因为呈现的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使用

标签

Answer 4

答案取决于您的nuxt项目的版本。如果版本为v <2.9.0，请使用no-ssr标记包装表格。否则，请使用如下所示的仅客户端标签：

版本<2.9.0：

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

版本> 2.9.0

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

提示：请注意，将在nuxt 3中删除no-ssr。

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

4 个答案: