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>