Vuejs webpack 环境中的语义 UI 侧边栏答案

【问题标题】：Semantic UI sidebar in Vuejs webpack environmentVuejs webpack 环境中的语义 UI 侧边栏
【发布时间】：2018-04-23 16:53:42
【问题描述】：

我正在使用 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>

【问题讨论】：

您的代码中没有#mobile-sidebar 元素。
你能发布一个更完整的代码示例吗？此粘贴似乎只是 vue.js 组件，但不包括侧边栏的标记。
添加了代码而不是 pastebin。

标签： jquery webpack vue.js semantic-ui

【解决方案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>

【讨论】：