![渲染]( "渲染")
本文介绍了Vue 警告客户端渲染的虚拟 DOM 树与服务器渲染的内容不匹配的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 Vue.js 和 Nuxt 在表中循环 tr.但是当我加载页面时出现以下错误
vue.runtime.esm.js?2b0e:619 [Vue 警告]:客户端渲染虚拟 DOM 树与服务器渲染的内容不匹配.这是可能是由不正确的 HTML 标记引起的，例如嵌套
中的块级元素，或者缺少 .百灵补水并执行完整的客户端渲染.
当我从 HTML 的以下代码块中删除表格时，错误消失了.这怎么会发生?我检查了所有结束标签，它们似乎匹配.这里发生了什么?
在模板中
<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>
</内容块>
在脚本中
数据(){返回{统计数据: [{key:"TestKey1", value:"TestValue1"},{key:"TestKey2", value:"TestValue2"},{key:"TestKey3", value:"TestValue3"},{key:"TestKey4", value:"TestValue4"},],}},
这是我渲染的 html
HTML
解决方案
Marvin Rudolph 帮助我解决了 Nuxt 不和谐问题.我需要在我的 tr 周围添加一个 tbody 并且错误消失了
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
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
解决方案
Marvin Rudolph helped me out on the Nuxt discord. I needed to add a tbody around my tr and the error was gone
这篇关于Vue 警告客户端渲染的虚拟 DOM 树与服务器渲染的内容不匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！