Show hide components in Vue.js 3

Question

I have a navbar and a side bar (two separate components) and I'm trying to show/hide my sidebar using a button in the navbar component and it's not working, I tried:

• v-show, v-if, using a localStorage value but nothing does it, the sidebar stays hidden.

Sidebar:

<template>
<aside v-show="local_variable" class="fixed hidden h-full top-0 left-0 flex lg:flex flex-shrink-0 flex-col w-64">

</aside>
</template>

Does the value saved in localStorage from the navbar needs to be updated on change when used with the sidebar?

Answer 1

Remove tailwind 'hidden' class if you want to toggle visibility of component with 'v-show', 'v-if'. Otherwise use Vue class and style binding https://vuejs.org/guide/essentials/class-and-style.html#binding-html-classes and remove 'v-show', 'v-if'.