vue.js - PyCharm 警告 : Closing tag matches nothing for tag

Question

从我的 PyCharm 中检查代码之后。它警告我作为结束标签不匹配最后</p>标签

但是我没有发现我的代码有任何错误。 p 标签已正确关闭。

  <p v-if="files.length">
      <ul>
        <li v-for="file in files">
            {{file.name}} <span v-if="file.success"> - success. </span><span v-if="file.error"> - fail. </span>
            <span v-if="file.success || file.error">{{file.xhr.responseText}}</span>
        </li>
      </ul>
  </p>

如何正确解决此警告？

Answer 1

此警告是由无效的 HTML 引起的。 p 元素中不允许使用 ul 元素。该警告可以通过重构源代码以遵循 HTML specification 来解决。 .

删除p元素:

<ul>
  <li v-for="file in files">
      {{file.name}} <span v-if="file.success"> - success. </span><span v-if="file.error"> - fail. </span>
      <span v-if="file.success || file.error">{{file.xhr.responseText}}</span>
  </li>
</ul>

将 p 元素转换为 div 元素:

<div v-if="files.length">
  <ul>
    <li v-for="file in files">
        {{file.name}} <span v-if="file.success"> - success. </span><span v-if="file.error"> - fail. </span>
        <span v-if="file.success || file.error">{{file.xhr.responseText}}</span>
    </li>
  </ul>
</div>

<小时/>

答案 https://stackoverflow.com/a/5681796 中对规范的相关部分进行了精彩的总结。 。请注意，答案专门针对 ol 而不是 ul，但仍然适用，因为它们的类别和内容模型是相同的。

如果 PyCharm 警告消息更具体一些就更好了。这可以在 PyCharm 的付费版本中通过自定义检查来完成，但在社区版中则不可能。 https://www.jetbrains.com/help/pycharm/creating-custom-inspections.html