Question

我遇到的问题可能是vuejs的错误。

这是我的导航栏。呈现后，类ml-0 ml-md-auto不会显示在浏览器检查器中，并且不会应用其样式。

这是来源：

<ul v-if="authd" v-bind:class="{nav: true, toggled : bshow_nav }">          
    <li class="nav-item d-block d-md-none"><div class='nav-toggle' @click="bshow_nav = !bshow_nav"><img src="~/assets/images/icons/hamburger_white.svg" alt="Menu" width="24" height="24" /></div></li>
    <li class="nav-item"><a class='nav-link' href="/profile" >Profile</a></li>
    <li class="nav-item"><a class="nav-link" href="/privacy">Privacy</a></li>
    <li class="nav-item"><a class="nav-link" href="/order">Order</a></li>

    <!-- this line -->
    <li class="nav-item ml-0 ml-md-auto"><a href="#" @click.prevent="logout" class='nav-link'>Logout</a></li>

    <li class='nav-item nav-footer'><img src="~/assets/images/voxicard_roundel.svg" alt="Voxicard" width="56" height="56" /></li>
</ul>

这是呈现的内容：


<ul class='nav'>
    <li class="nav-item d-block d-md-none"><div class='nav-toggle'><img src="~/assets/images/icons/hamburger_white.svg" alt="Menu" width="24" height="24" /></div></li>
    <li class="nav-item"><a class='nav-link' href="/profile" >Profile</a></li>
    <li class="nav-item"><a class="nav-link" href="/privacy">Privacy</a></li>
    <li class="nav-item"><a class="nav-link" href="/order">Order</a></li>

    <!-- this line; see, there classes are not shown. -->
    <li class="nav-item"><a href="#" class='nav-link'>Logout</a></li>

    <li class='nav-item nav-footer'><img src="~/assets/images/voxicard_roundel.svg" alt="Voxicard" width="56" height="56" /></li>
</ul>

我尝试重新启动服务器，刷新页面，清除缓存，使用不同的浏览器，使用不同的页面，尝试使用不同的类，但它仍然存在，我绝对不知道为什么-它只是html！

如果我进行其他任何编辑，它将更新并在浏览器中呈现，只是没有class属性中的任何内容，并且仅保留nav-item

如何

当我将屏幕缩小到移动视图时，它开始工作并显示。无论如何，这些类为什么不出现在第一个渲染器上？没有任何条件或功能可以使它们在元素上显示和消失，而是将其硬编码到元素中。

Answer 1

我通过删除同级元素上的v-else条件并仅具有相反的v-if语句来解决此问题，

更改了此内容

<ul v-if="authd" v-bind:class="{nav: true, toggled : bshow_nav }">          
    <li class="nav-item d-block d-md-none"><div class='nav-toggle' @click="bshow_nav = !bshow_nav"><img src="~/assets/images/icons/hamburger_white.svg" alt="Menu" width="24" height="24" /></div></li>
    <li class="nav-item"><a class='nav-link' href="/profile" >Profile</a></li>
    <li class="nav-item"><a class="nav-link" href="/privacy">Privacy</a></li>
    <li class="nav-item"><a class="nav-link" href="/order">Order</a></li>

    <!-- this line -->
    <li class="nav-item ml-0 ml-md-auto"><a href="#" @click.prevent="logout" class='nav-link'>Logout</a></li>

    <li class='nav-item nav-footer'><img src="~/assets/images/voxicard_roundel.svg" alt="Voxicard" width="56" height="56" /></li>
</ul>
<ul v-else>  <!-- FROM THIS HERE -->
...
</ul>

对此：

<ul v-if="authd" v-bind:class="{nav: true, toggled : bshow_nav }">          
    <li class="nav-item d-block d-md-none"><div class='nav-toggle' @click="bshow_nav = !bshow_nav"><img src="~/assets/images/icons/hamburger_white.svg" alt="Menu" width="24" height="24" /></div></li>
    <li class="nav-item"><a class='nav-link' href="/profile" >Profile</a></li>
    <li class="nav-item"><a class="nav-link" href="/privacy">Privacy</a></li>
    <li class="nav-item"><a class="nav-link" href="/order">Order</a></li>

    <!-- this line -->
    <li class="nav-item ml-0 ml-md-auto"><a href="#" @click.prevent="logout" class='nav-link'>Logout</a></li>

    <li class='nav-item nav-footer'><img src="~/assets/images/voxicard_roundel.svg" alt="Voxicard" width="56" height="56" /></li>
</ul>
<ul v-if="!authd"> <!-- <<<<< HERE -->
...
</ul>

为什么要这样做？我不知道。

VueJS元素类未呈现

1 个答案: