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

Posted 2023-02-23

【中文标题】vuejs 应用程序不起作用切换代码集成

【英文标题】：vuejs application doesnt work toggle code integrated

【发布时间】：2019-03-23 02:29:05

【问题描述】：

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>

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

【问题讨论】：

检查这个：codesandbox.io/s/8ln5nk9nm9

【参考方案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;
      
   
  )

【讨论】：

我得到 Uncaught ReferenceError: Vue is not defined 。我已经更新了我的代码

@Tested 确保您已在您的html 和在您的文件中的任何位置使用Vue 之前为Vue 添加了script 标签。

@JunedLanja 我确实添加了已经更新了我的代码，现在我没有收到那个引用错误，但是它什么都不显示