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

首先，在您的return中添加=，然后将:更改为;，将,更改为data()

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中切换功能不起作用

2 个答案: