【Vue】[vite] warning: ＜h3＞ cannot be child of ＜p＞, according to HTML specifications.

【Vue】[vite] warning: ＜h3＞ cannot be child of ＜p＞, according to HTML specifications.

问题描述

18:28:48 [vite] warning: <h3> cannot be child of <p>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.
252|            <h2 data-v-inspector="src/App.vue:252:11">区块列表</h2>
253|            <p v-for="(block, index) in chain.blocks" data-v-inspector="src/App.vue:253:11">
254|              <h3 data-v-inspector="src/App.vue:254:13">区块{{ index }}</h3>
   |              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
255|              <span data-v-inspector="src/App.vue:255:13">时间戳：{{ block.timestamp }} ({{ new Date(block.timestamp).toLocaleString() }})</span><br data-v-ictor="src/App.vue:255:102"/>
256|              <span data-v-inspector="src/App.vue:256:13">区块哈希：{{ block.hash }}</span><br data-v-inspector="src/App.vue:256:47"/>
  Plugin: vite:vue

原因分析

根据HTML规范，<h3>不能作为<p>的子元素。这可能会导致hydration错误或潜在地破坏未来的功能。

解决方案

1. 将<p>元素替换为<div>或其他合适的容器元素。
2. 将<h3>元素正确嵌套在新的容器中。