Vue3中v-html及innerHTML无法渲染<ul>无序列表的问题求助

以下是针对该问题的具体排查方向：

• 检查HTML字符串的转义状态
  在mounted钩子中直接打印this.html的原始内容，确认是否存在HTML实体转义（比如显示为<ul>而非<ul>）。如果是转义后的字符串，浏览器会将其解析为纯文本而非标签。可使用DOMParser进行解码：

  const parser = new DOMParser();
  const decodedHtml = parser.parseFromString(this.html, 'text/html').body.textContent;
  e.innerHTML = decodedHtml;
  

• 排查CSS样式干扰
  打开浏览器开发者工具定位到<ul>元素，查看其计算样式：

  • 检查display属性是否被设为none或hidden
  • 检查list-style-type是否为none（导致列表项无符号）
  • 检查margin/padding是否为0（导致列表缩进消失，看起来像普通文本）
    可临时在开发者工具中手动修改样式，验证是否是样式问题导致的“视觉上未渲染”。

• 验证HTML结构合法性
  复制数据库中存储的HTML字符串到HTML验证工具中，检查是否存在标签嵌套错误（比如<ul>内嵌套了不允许的块级元素、<li>标签未闭合等）。浏览器遇到不规范的HTML结构时，可能会自动修正或忽略部分内容，导致<ul>无法正常解析。

• 测试最小化渲染案例
  编写极简Vue组件单独测试<ul>渲染：

  <template>
    <div v-html="testList"></div>
  </template>
  <script setup>
  const testList = '<ul><li>测试项1</li><li>测试项2</li></ul>'
  </script>
  

  如果该案例能正常渲染，说明问题出在原HTML字符串的其他部分，或是项目中的全局配置（比如自定义指令、全局样式重置）影响了渲染。

• 确认数据库存储内容的正确性
  直接查看数据库中存储的富文本字段，确认内容是否被额外转义。部分后端框架或ORM会自动转义HTML字符以防止XSS，导致存储的是转义后的实体字符，前端取出时需要先解码再渲染。

内容的提问来源于stack exchange，提问作者WayneD