[Vuejs]-VueJS Element Classes Not Rendering

by

0👍

I fixed by removing the v-else condition on the sibling element and just having an opposite v-if statement like so:

changed this:

<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>

to this:

<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>

Why did this work? I don’t know.

Leave a comment