After inspect code from my PyCharm. It warns me as
Closing tag matches nothing at last </p>
tag
But I didn't find any wrong my code. p tag is closed correctly.
<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>
How can I resolve this warning correctly?
This warning is caused by invalid HTML. The ul
element is not allowed within the p
element. The warning may be resolved by refactoring the source to follow the HTML specification.
Remove p
element:
<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>
Convert p
element to div
element:
<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>
There is an excellent summary of the relevant portions of the spec in the answer https://stackoverflow.com/a/5681796. Note that the answer specifically addresses ol
rather than ul
, but is still applicable because their Categories and Content Model are the same.
It would be better if the PyCharm warning message was more specific. This can be done in the paid version of PyCharm via custom inspections, but is not possible in the Community Edition. https://www.jetbrains.com/help/pycharm/creating-custom-inspections.html