bootstrap 3 navbar button functionality-CodePudding

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 >
        <a  href="#">test</a>
          <button v-on:click="logout()" >logout</button>
      </nav>
      
   <div id="app">
  <h2>my app:</h2>
  <button v-on:click="logout()" >logout</button>
</div>

CodePudding user response：

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 >
    <a  href="#">test</a>
    <button v-on:click="logout()" >logout</button>
  </nav>
  <div id="app">
  <h2>my app:</h2>
  <button v-on:click="logout()" >logout</button>
</div>