时间戳

首页 > 解决方案 > VueJS

javascript - VueJS
    引发不匹配的 HTML - 警告？

问题描述

由于我的标题中的某些内容，VueJS 在每个页面上都给我这个错误：

warn Parent:  
<ul class="nav">
warn Mismatching childNodes vs. VNodes:  
NodeList(13) [ <!--  -->, #text, <!--  -->, #text, li.nav-item, #text, li.nav-item, #text, li.nav-item.account, #text, … ]

error [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render. consola.browser.js:1:7123
error [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render. (repeated 1 times) consola.browser.js:1:7123

这是标头的源代码：

<ul v-bind:class="{nav: true, toggled : bshow_nav }">           
    <li v-if="authd" class="nav-item">
        <a class="nav-link" href="/profile">My Profile</a>
    </li>
    <li v-if="authd" class="nav-item">
        <a class="nav-link" href="/payment">Payment Options</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="site.com/privacy">Privacy Policy</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="www.site.com/faq">F.A.Q.</a>
    </li>
    <li v-if="!authd" class="nav-item account">
        <a href="/signup" class="nav-link">Sign Up</a>
    </li>
    <li :class="{'nav-item' : true, 'account' : authd}">
        <a v-if="authd" href="#" class="nav-link" @click="logout">Logout</a>
        <a v-else class="nav-link" href="/login">Login</a>
    </li>
    <li class='nav-item nav-footer'>
        <img src="~/assets/images/logo.svg" alt="logo" width="60" height="60" />
    </li>
</ul>

渲染时就是这样：

<li class="nav-item"><a href="/profile" class="nav-link">My Profile</a></li>
<li class="nav-item"><a href="/payment" class="nav-link">Payment Options</a></li>
<li class="nav-item"><a href="https://mysitecom/privacy" class="nav-link">Privacy Policy</a></li>
<li class="nav-item"><a href="https://mysitecom/faq" class="nav-link">F.A.Q.</a></li>
<!---->
<li class="nav-item account"><a href="#" class="nav-link">Logout</a></li>
<li class="nav-item nav-footer"><img src="/_nuxt/assets/images/logo.svg" alt="logo" width="60" height="60"></li>

我的理论是这<!---->就是原因，因为它期望 中的所有标签<ul>都是<li>标签。

有什么办法可以忽略这一点或做一些时髦的工作吗？

标签： javascripthtmlvue.jsnuxt.js

解决方案

推荐阅读