0

EDIT I've have made the question simpler with an example app located here -> https://codesandbox.io/s/pensive-ellis-lguch?file=/pages/index.vue

Clicking on the login button correctly takes the app to the accountHandle page. However why is the URL incorrect? The Url after clicking Login will say --> Invalid. The correct URL should instead say ---> Valid.

Why is this happening?

Just a coder
  • 15,480
  • 16
  • 85
  • 138
  • It should probably be `{ name: 'accountName', params: { accountName: user.accountName } }`. Also, make sure that `user.accountName` is recomputed, aka in a `computed()` otherwise it will not be reactive (if only in `data`). – kissu Sep 15 '21 at 01:05
  • I tried putting it in a computed property, but it is appears that its still not reactive... Im not sure what else might be wrong. – Just a coder Sep 15 '21 at 01:50
  • Does it have the expected value? Check in your vue devtools. – kissu Sep 15 '21 at 01:52
  • Yes it does. After login, Vuex Store correctly has the userHandle, and I can log it to console using dev tools. But when it gets to the new page, i get error. I updted question with sen error – Just a coder Sep 15 '21 at 01:56

1 Answers1

1
  1. You need not use this keyword in the template.
<nuxt-link
  :to="{ name: accountName params: {accountName: user.accountName} }"
  custom
  v-slot="{navigate}"
>
   <p @click="loginFunction(navigate)">LOG IN</p>
</nuxt-link>
  1. You are doing something complected here. Your p tag is inside nuxt-link and it has click listener set. This means whenever you click on this link, click listeners for both p and nuxt-link are activated and you will get unexpected results. Because login is async task, your link is already trying to take you to '' before even login completes.

The clean solution would be to change the route programmatically. Follow this answer.

// after login completes
this.$router.push({path: user.accountName});
Mayank Kumar Chaudhari
  • 16,027
  • 10
  • 55
  • 122
  • Thanks for #1. I have fixed it now. But for #2, I am trying to not have a programmatic navigation here (for crawler purposes). I had the impression that there wont be 2 click listeners? Because nuxt-link will only activate using the `navigate` object, which will be called inside of the loginFunction. Let me re-do the question to make it simpler. I have created a simple example app which re-creates this issue. – Just a coder Sep 15 '21 at 02:55
  • This link will not help you in SEO or crawlers anyway, unless you have a fixed number of users and you are making all user data public – Mayank Kumar Chaudhari Sep 15 '21 at 03:26
  • Crawlers can not go to pages protected by auth mechanism – Mayank Kumar Chaudhari Sep 15 '21 at 03:27
  • You are correct. But just to clarify, this is only one link in my app. There are others which take information from the server and i need to dynamically point the route to that that location, just like this example. – Just a coder Sep 15 '21 at 03:30
  • Then stop event bubbling conditionally. So that link does not receive click when element inside it is supposed to listen click – Mayank Kumar Chaudhari Sep 15 '21 at 03:51
  • I ended up just doing the router.push. It doesnt look like nuxt-link is built that way – Just a coder Sep 17 '21 at 13:56