почему в Vuejs функция переключения не работает - PullRequest
Новая
       10

почему в Vuejs функция переключения не работает

0 голосов
/ 19 октября 2018

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()'>

функция щелчка не добавлена ​​к нему

миспользуя 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;
   }

Ответы [ 2 ]

0 голосов
/ 19 октября 2018 
  <script>
   export default{
    data(){
        isOpen: false;    //Change this line to : instead of =
    },
    method(){
        toggleSideBar: function(){
        console.log("================"+this.isOpen)
            this.isOpen=!this.isOpen;
        }
    },
   }
  </script>
0 голосов
/ 19 октября 2018

сначала добавьте 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;
        },
    }
}
...