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>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>