[Vuejs]-Conditional nav in app.vue depending on user logged in state from main.js

by

0👍

✅

Generally, App should use its own data items, so if you define loggedIn as one, you should get the behavior you want. Since it’s your top-level module, I don’t expect you want to pass it in as a prop, although that would work, too.

const App = {
  data() {
    return {
      loggedIn: false
    };
  },
  template: '#app-template',
  mounted() {
    setTimeout(() => this.loggedIn = true, 2500);
  }
};

new Vue({
  render(h) {
    return h(App);
  }
}).$mount('#app')
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
</div>

<template id="app-template">
  <div id="nav">
    <template v-if="loggedIn">
      This is the logged in one
    </template>
    <template v-else>
      This is the not logged in one.
    </template>
  </div>
</template>

Leave a comment