[Vuejs]-Semantic UI sidebar in Vuejs webpack environment

by

0👍

✅

After having been struggling a while I managed to fix the problem eventually:

<script>
    export default {
    name: 'nav-bar',
    data: function () {
        return {
            isToggled: false,
            sideBar: null
        }
    },
    methods: {
         toggle: function () {
             if (this.isToggled) {
                 this.sideBar.sidebar('hide')
             } else {
                 this.sideBar.sidebar('show')
             }
         }
    },
    mounted: function () {
        this.sideBar = $('#mobile-sidebar')
        let self = this
        this.sideBar.sidebar({
            transition: 'push',
            onHidden: function () {
                self.isToggled = false
            },
            onShow: function () {
                self.isToggled = true
            }
        })
   }
   }
 </script>

Leave a comment