CODEWITHSUNDEEP
javascriptvue.jsvuejs2twitter-bootstrap-3
Vzupo
Vzupo

Reputation: 1468

bootstrap 3 navbar button functionality

I have a reoccurring issue i always run into with navbars. I always have a button that has a method that wont get executed until I move it from within the navbar to actually inside of the app. How do I avoid this or execute the method from the navbar outside of the app? As you can see the logout button works fine on the page but not within navbar.

new Vue({
  el: "#app",
  data: {
    todos: [
     
    ]
  },
  methods: {
     logout() {
     alert("test");
            localStorage.removeItem("user");
            window.location.reload(true);
          },
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <link
      href="https://netdna.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
      rel="stylesheet"
    />
    
        <nav class="navbar navbar-dark bg-primary">
        <a class="navbar-brand" href="#">test</a>
          <button v-on:click="logout()" class="btn btn-primary">logout</button>
      </nav>
      
   <div id="app">
  <h2>my app:</h2>
  <button v-on:click="logout()" class="btn btn-primary">logout</button>
</div>

Upvotes: 2

Views: 35

Answers (1)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23490

You can query document and listen to event:

new Vue({
  el: "#app",
  data: {
    todos: []
  },
  mounted() {
    document.querySelector('.outside').addEventListener('click', () => {
      this.logout()
    })
  },
  methods: {
    logout() {
      alert("test");
    },
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
  <nav class="navbar navbar-dark bg-primary">
    <a class="navbar-brand" href="#">test</a>
    <button v-on:click="logout()" class="btn btn-primary outside">logout</button>
  </nav>
  <div id="app">
  <h2>my app:</h2>
  <button v-on:click="logout()" class="btn btn-primary">logout</button>
</div>

Upvotes: 1

Related Questions