title: Hiding Log Out Nav button on Log in page Vue JS
body: <p>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:</p>
  
  <pre><code>        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
              }
            }
  </code></pre>
  
  <p>This console.log output is just to check whether it works. But I can't find the way to reference the <code>&lt;li&gt;</code> from navHeader in order to hide it on the page.  Navigation is in navHeader.vue through <code>&lt;router-link&gt;</code> only logout is just <code>&lt;li&gt;</code> This is navHeader.vue</p>
  
  <pre><code>&lt;template&gt;
  &lt;nav&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;router-link to="/home" exact&gt;To Do&lt;/router-link&gt;&lt;/li&gt;
      &lt;li&gt;&lt;router-link to="/done" exact&gt;Done&lt;/router-link&gt;&lt;/li&gt;
      &lt;li&gt;&lt;router-link to="/inprogress" exact&gt;In Progress&lt;/router-link&gt; 
  &lt;/li&gt;
      &lt;li id="#routerbtn" v-on:click="logout"&gt;Log Out&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import firebase from 'firebase'
  
  export default {
  
  methods: {
  
      logout: function () {
      firebase.auth().signOut().then(() =&gt; {
          this.$router.replace('login')
      })
  }
  }
  }
  </code></pre>
  
  <p>Thanks for any suggestions, cheers!</p>