Question

我正在使用VueJS webpack模板。

我在Semantic UI中与我的侧边栏挣扎。有人可以指出我的代码有什么问题。它切换侧边栏，但是当我再次点击图标时，它不会隐藏侧边栏，而是可以看到一个奇怪的眨眼。

src

Answer 1

经过一段时间的努力，我最终设法解决了这个问题：

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

Vuejs webpack环境中的语义UI侧栏

1 个答案: