Rendering condition vue js

Question

I created a login page, where I made the conditions. if not logged in displays NAVBAR A if login is successful displays NAVBAR B. In the login process I created a local storgare storage in which a token is stored. I ask why is mounted late rendering? when the user is logged in it should render navbar B, it works if it is refreshed first

my code app.vue

<v-main>
     <NavA v-if="token==='' "/> //if not login
     <NavB v-if="token!='' "/> // if login success
      <router-view />
</v-main>

data: () => ({
    drawer: true,
    token: '',
  }),

  mounted () {
      this.token = localStorage.getItem('token')
  },

give token: null and <NavA v-if="token == null "/>

Mr. Perfectionist
– Mr. Perfectionist

2021-01-04 05:52:12 +00:00
Commented Jan 4, 2021 at 5:52 — Mr. Perfectionist
– Mr. Perfectionist, Commented Jan 4, 2021 at 5:52

Alireza Gholami · Accepted Answer · 2021-01-04 04:31:29Z

1

change "mounted" to "created", maybe it helps.

answered Jan 4, 2021 at 4:31

Alireza Gholami

845 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mr. Perfectionist · Accepted Answer · 2021-01-04 06:01:28Z

0

You should always use if-else condition.

<v-main>
   <NavA v-if="token == null "/> //if not login
   <NavB v-else /> // else login success
   <router-view />
</v-main>

data: () => ({
  drawer: true,
  token: null,
}),

mounted () {
   this.token = localStorage.getItem('token')
},

This is working for me. See in Sandbox.

https://codesandbox.io/s/charming-aryabhata-pl2k4?file=/src/App.vue

answered Jan 4, 2021 at 6:01

Mr. Perfectionist

2,7863 gold badges28 silver badges37 bronze badges

1 Comment

Harry Wardana Over a year ago

For this it works, but when the rendering doesn't work, it must be refreshed first

Yash Maheshwari · Accepted Answer · 2021-01-04 09:18:38Z

0

You can try using beforeMount hook instead of using the mounted hook.

edited Jan 4, 2021 at 9:18

answered Jan 4, 2021 at 9:03

Yash Maheshwari

2,4122 gold badges10 silver badges22 bronze badges

Collectives™ on Stack Overflow

Rendering condition vue js

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related