vuejs 应用程序不起作用切换代码集成

Question

vue m 新手在单击菜单图标时创建垂直导航栏，导航栏必须切换
我的菜单图标代码

    <button type="button" id="sidebarCollapse" class="btn btn-info [collapsed?'':'sidebar']"  >
    <i class="fas fa-align-left"></i>
    </button>

在切换菜单图标时我想显示导航侧边栏

   <nav id="sidebar" class="sidebar">
    </nav>

我的vue代码

  new Vue({
   e1:'#app',
   data:{
       collapsed:true
   }
})

它没有显示任何新的 vue 东西，谁能帮我看看发生了什么

更新代码

位置.vue

  <template>
   <div class="wrapper">
     <nav id="sidebar" class="sidebar" v-if="showSidebar">  
       <ul class="list-unstyled component">
            <li class="active">
                <a href="#homeSubMenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>
                <ul class="collapse list-unstyled" id="homeSubMenu">
                    <li class="dropdown-menu-mn">
                        <a href="#">Home1</a>
                        <a href="#">Home2</a>
                    </li>
                </ul>
            </li>                                                 
        </ul>
    </nav>        
        <div id="content">
            <nav>
                <div class="navbar navbar-expand-lg navbar-light bg-light">
                    <div class="container-fluid">

                        <button type="button" id="sidebarCollapse" class="btn btn-info" @click="toggleSidebar">
                          <i class="fas fa-align-left"></i>
                        </button>
                    </div>
                </div>
            </nav>
        </div>        
    </div>  
   </template>

  <script>
    new Vue({
    el:'#app',
    data: {
   showSidebar: false
    },
    methods: {
  toggleSidebar: function() {
     this.showSidebar = !this.showSidebar;
  }}})            
  </script>

更新脚本标签

    <script>
    export default{
    data() {
   showSidebar: false
    },
     toggleSidebar(){
     this.showSidebar = !this.showSidebar;
    } };   
   </script>

但它仍然不起作用。现在只有菜单按钮出现，但切换不起作用。谁能让我知道我哪里出错了

Answer 1

在按钮上添加@click监听器

    <button type="button" id="sidebarCollapse" class="btn btn-info" @click="toggleSidebar">
       <i class="fas fa-align-left"></i>
    </button>

在侧边栏添加v-if 指令，将切换侧边栏的可见性

   <nav id="sidebar" class="sidebar" v-if="showSidebar">
    </nav>

添加method 来处理click 事件methods: toggleSidebar .... 并切换v-if 指令中使用的值

  new Vue({
   el:'#app',
   data: {
       showSidebar: false
   },
   methods: {
      toggleSidebar: function() {
         this.showSidebar = !this.showSidebar;
      }
   }
  })