Hiding Log Out Nav button on Log in page Vue JS - firebase

Question

I'm building a simple VueJS Web app with firebase and firebase authentication (email-password). Authentication part works great, however, I don't want to have Log Out button in my Nav bar on the Log in screen(or sign up screen for that matter).
I've set up a function in loginScreen.vue that checks whether user is logged in (if no user is logged in it is null) so it is:
created () {
var user = firebase.auth().currentUser;
if (user != null) {
console.log('no null')
// reference to #routerbtn .show
} else {
console.log('yes null')
// reference to #routerbtn .hide
}
}
This console.log output is just to check whether it works. But I can't find the way to reference the <li> from navHeader in order to hide it on the page. Navigation is in navHeader.vue through <router-link> only logout is just <li> This is navHeader.vue
<template>
<nav>
<ul>
<li><router-link to="/home" exact>To Do</router-link></li>
<li><router-link to="/done" exact>Done</router-link></li>
<li><router-link to="/inprogress" exact>In Progress</router-link>
</li>
<li id="#routerbtn" v-on:click="logout">Log Out</li>
</ul>
</nav>
</template>
<script>
import firebase from 'firebase'
export default {
methods: {
logout: function () {
firebase.auth().signOut().then(() => {
this.$router.replace('login')
})
}
}
}
Thanks for any suggestions, cheers!

Answer 1

In your created method change to:
created () {
this.user = firebase.auth().currentUser || false;
}
Also make sure user is in your data method.
Then check user in your view.
<ul>
...
<li v-if="user">Log Out</li>
<li v-else>Register</li>
...
</ul>
As you go on, you want to abstract out the menu into a component so you're not repeating this same code throughout each page.