为什么在 Vuejs 中切换功能不起作用

Question

m 拉着最后一根头发使用 vuejs 控制台切换功能我没有找到任何东西我的代码似乎是

   <template>
  <div class="wrapper">
    <nav class="nav flex-column sideBar" v-show='isOpen'>
        <a class="nav-link active" href="#">Home</a>
        <a class="nav-link" href="#">Contact</a>
    </nav>
   <div class="container-fluid">
       <nav>
            <div class="content">
                <div  class="navbar navbar-expand-lg">
                    <button type="button" class="btn btn-info" @click='toggleSideBar'>
                        <i class="fas fa-align-left"></i>
                    </button>
                </div>
            </div>
       </nav>    
   </div>  
   </div>
   </template>

  <script>
   export default{
    data(){
        isOpen=false;
    },
    method(){
        toggleSideBar();
    },
    toggleSideBar(){
        console.log("==========="+this.isOpen)
            this.isOpen=!this.isOpen;
        }
   }
  </script>

点击切换功能的按钮不工作不工作非常感谢任何帮助

这是浏览器中的检查 html

  <button type="button" class="btn btn-info">

而不是

   <button type="button" class="btn btn-info" onclick='toggleSidebar()'>

没有添加点击功能

m 使用 sass

               .wrapper {
    display: flex;
align-items: stretch;
 width:100%;
   }
 .sideBar{
 border: 1px solid;
width: 30%;
height: 100vh;
margin-left: 0;
transition: all 0.5s;
background-color: #f9f9f7;
   }
 .container-fluid {
  padding-right: 0px; 
      padding-left: 0px; 
   }
     .navbar{
      @extend .navbar;
   background-color: #eae9e5;
    }
     .sidebar.active {
     margin-left: -250px;
   }

Answer 1

首先，在 data()

中添加 return，然后将 = 更改为 :，将 ; 更改为 ,

data(){
    return{
        isOpen: false,
    }
},

然后将 toggleSideBar() 放入您的 method 中，如下所示：

methods:{
    toggleSideBar(){
        console.log("================"+this.isOpen)
        this.isOpen=!this.isOpen;
    }
}

最终输出

export default{
    data(){
        return{
            isOpen: false,
        }
    },
    methods:{
        toggleSideBar(){
            console.log("================"+this.isOpen)
            this.isOpen=!this.isOpen;
        },
    }
}

Answer 2

  <script>
   export default{
    data(){
        isOpen: false;    //Change this line to : instead of =
    },
    method(){
        toggleSideBar: function(){
        console.log("================"+this.isOpen)
            this.isOpen=!this.isOpen;
        }
    },
   }
  </script>

为什么在 Vuejs 中切换功能不起作用

why is in Vuejs the toggle functionality not working

toggle

vue.js

vuejs2