changing v-model in sidebar not working to hide or show it,click on background also not working

[mohammedaktaa]

This is my code

<div class="home">
    <div id="parentx">

        <vs-button @click="activeState" color="success" type="filled">Open Sidebar Reduce-expand</vs-button>
        <vs-sidebar :reduce="!reduce" :hidden-background="hiddenBackground" @mouseover="reduceState"
                    parent="body" default-index="1" color="danger" :reduce-not-hover-expand="notExpand"
                    class="sidebarx"  v-model="active">

            <div class="header-sidebar" slot="header">
                <div class="logo flex items-center">
                    <img @click="reduceState" class="cursor-pointer" :width="!reduce===true?'30':'78'" v-show="reduce"
                         :height="!reduce?'25':'55'" src="../assets/logo.png" alt="logo"/>
                    <span class="logo-text" style="" v-show="reduce">Vuesax</span>
                    <div class="reduce-icon">
                    <span class="mr-0 cursor-pointer feather-icon select-none relative" v-show="!reduce" style=""
                          @click="reduceState">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                             fill="none"
                             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                             class="feather feather-disc stroke-current">
                            <circle cx="12" cy="12" r="10"></circle>
                            <circle cx="12" cy="12" r="3"></circle>
                        </svg>
                    </span>
                        <span class="mr-0 cursor-pointer feather-icon select-none relative" v-show="reduce"
                              @click="reduceState">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                         fill="none"
                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                         class="feather feather-circle stroke-current">
                    <circle cx="12" cy="12" r="10"></circle>
                    </svg>
                    </span>
                    </div>
                </div>
            </div>
            <div class="shadow-bottom" style=""></div>
            <vs-sidebar-group open>

                <vs-sidebar-item index="5">
                    <i v-html="iconSvg('home')"></i>
                    <router-link tag="a" to="/about" v-show="reduce">Dashboard</router-link>
                </vs-sidebar-item>
                <vs-sidebar-group title="Apps">
                    <vs-sidebar-item index="2.1" >
                        <i v-html="iconSvg('calendar')"></i>
                        <router-link tag="a" to="/calendar" v-show="reduce">Calendar</router-link>
                    </vs-sidebar-item>
                    <vs-sidebar-item index="2.2" >
                        <i v-html="iconSvg('mail')"></i>
                        <router-link tag="a" to="/email" v-show="reduce">Email</router-link>
                    </vs-sidebar-item>
                    <vs-sidebar-item index="2.3" >
                        <i v-html="iconSvg('check-square')"></i>
                        <router-link tag="a" to="/todo" v-show="reduce">Todo</router-link>
                    </vs-sidebar-item>
                </vs-sidebar-group>
                <vs-sidebar-item index="2" icon="gavel">
                    <span v-show="reduce">History</span>
                </vs-sidebar-item>
                <vs-sidebar-item index="3" icon="https">
                    <span v-show="reduce">Security</span>
                </vs-sidebar-item>
                <vs-sidebar-item index="4" icon="help">
                    <span v-show="reduce">Help</span>
                </vs-sidebar-item>
            </vs-sidebar-group>

            <vs-divider icon="person" position="left">
                User
            </vs-divider>

            <vs-sidebar-item index="6" icon="account_box">
                Profile
            </vs-sidebar-item>

            <div class="footer-sidebar" slot="footer">
                <vs-button icon="settings" color="primary" type="border"></vs-button>
            </div>

        </vs-sidebar>
    </div>
    <navbar @expandState="expandState" :classes="classes"></navbar>
    <!--<img alt="Vue logo" src="../assets/logo.png">-->
    <!--<HelloWorld msg="Welcome to Your Vue.js App"/>-->

</div>

and this is my js code

export default {
    name: 'home',
    data: () => ({
        classes: 'navbar-container-reduce',
        state: true,
        active: true,
        notExpand: false,
        reduce: true,
        hiddenBackground: true,
        hoverSidebar: false
    }),
    components: {
        Navbar,
        Sidebar,
        HelloWorld
    },
    methods: {
        // reduceState(state) {
        //     if (state.state === false)
        //         this.classes = "navbar-container";
        //     else
        //         this.classes = "navbar-container-reduce";
        // },
        expandState(state) {
            this.state = !state;
        },
        reduceState() {
            this.reduce = !this.reduce;
            this.hoverSidebar = !this.hoverSidebar;
            this.$emit('reduceState', {state: this.reduce})
        },
        activeState() {
            this.active =!this.active ;
        },
        iconSvg: function (icon) {
            return feather.icons[icon].toSvg()
        }
    }
}`

[mohammedaktaa]

[jsinhSolanki]

Hi, your code too messy. Next time please use the minimal code and please create jsfiddle or sandbox so we can easily find problems. Your code contains components which you haven't provided.

And after removing unnecessary components your code works fine. Sidebar is opening & closing when button is clicked.

Even if you find any issue create jsfiddle/sandbox with minimum code.

[mohammedaktaa]

https://jsfiddle.net/mohammadaktaa/kmvbcos4 this js fiddle link to try it

[brunokunace]

@mohammedaktaa thanks for letting us know, but, you can make a working fiddle to example this error? Its HELP us to find a bug

[luisDanielRoviraContreras]

please create a better example to help and fix the error