Vuejs webpack 환경의 시맨틱 UI 사이드 바

Question

VueJS webpack 템플릿을 사용하고 있습니다.

시맨틱 UI에서 사이드 바를 고민하고 있습니다. 누군가 내 코드에 어떤 문제가 있는지 지적 할 수 있습니까? 사이드 바를 토글하지만 아이콘을 다시 클릭하면 사이드 바를 숨기지 않고 이상한 깜박임을 볼 수 있습니다.

<template> 

<!-- Sidebar --> 
<div class="ui right demo vertical sidebar labeled icon menu" id="mobile-sidebar"> 
    <a class="item"> 
    <i class="sticky note icon"></i> 
    Bulletin 
    </a> 
    <a class="item"> 
    <i class="newspaper icon"></i> 
    News 
    </a> 
    <a class="item"> 
    <i class="mail icon"></i> 
    Contact us 
    </a> 
</div> 

<div class="ui fixed inverted main menu mobile-menu"> 
    <div class="ui container"> 
    <div class="item"> 
     Menu 
    </div> 
    <div class="right menu"> 

     <a class="launch icon item" id="mobile-menu-trigger" v-on:click="toggle"> 
     <i class="content icon"></i> 
     </a> 
    </div> 
    </div> 
</div> 
<div class="pusher"> 
    <h1> 
    Hello Vue 
    </h1> 
</div> 
</template> 


<script> 
    export default { 
     name: 'home', 
     methods: { 
      toggle: function() { 
       $('#mobile-sidebar').sidebar('toggle') 
      } 
     } 
    } 

</script> 

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>