Question - Vue-Router :id

[WorthLMS]

Maybe, I'm using this completely wrong... but here's what I am trying to do...

From the applications index (I can click an application and goto /applications/:id) and it loads from the VuexORM Application Model (This works great)

computed: { 
   application () {
      return Application.query().withAll().whereId(this.$route.params.id).first()
   }
}

What I would like to do though, is allow this to work when refreshing the page directly on the route...

So...

created() 
{ 
     this.FetchApplication() 
}

methods: { 

   FetchApplication()
   {
     if (!this.application)
       this.$api.applications.include('location', 'user').read(1)
           .then(response => Application.insert({ data: response.data })
   }
}

I added a console.log() to the .then() of my Fetch and to the computed property...

On Load, it attempts the computed property and obviously can't find anything... so it fires off the fetch, the item is correctly added to the store... the computed property then fires again... but it's still NULL after this point?

Is there a way to get around this without loading ALL the applications into the store...

[cuebit]

Are your primary keys declared as numbers? If so, you'll need to cast your route param e.g. Number(this.$route.params.id) since param values are strings.

[WorthLMS]

That doesnt make since why it works when pre loaded from index and not when loaded on refresh... but I will try

Sent via the Samsung Galaxy S9, an AT&T 5G Evolution capable smartphone Get Outlook for Androidhttps://aka.ms/ghei36

---

From: Cue @.> Sent: Wednesday, April 6, 2022 6:04:56 PM To: vuex-orm/vuex-orm @.> Cc: Software @.>; Author @.> Subject: [EXTERNAL]:Re: [vuex-orm/vuex-orm] Question - Vue-Router :id (Issue #773)

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.

Are your primary keys declared as numbers? If so, you'll need to cast your route param e.g. Number(this.$route.params.id) since param values are strings.

— Reply to this email directly, view it on GitHubhttps://github.com/vuex-orm/vuex-orm/issues/773#issuecomment-1090899435, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AUH5FSIFIRIKF3OJEDBIVTLVDYKBRANCNFSM5SXNE54A. You are receiving this because you authored the thread.Message ID: @.***>

[WorthLMS]

OK! Please explain to me why that worked?

When I go from Index (Loaded 6 Applications) -> View Page (it shows fine with the original code)

When I refresh, it doesn't... But when I changed it to use Number() it does...

Why did it work from Index -> View, and not from Refresh to View? Both were using this.$route.params.id

Is it the way that Vue-Router passed the param?

[cuebit]

When you navigate through router-link or programmatic navigation you're providing the param as a number.

When you refresh, the params are parsed from the URL (string) therefore the value will be a string.

Alternatively, if the component is a route component, consider using props and cast at the point of route configuration to avoid casting within components.

[WorthLMS]

Worked like a charm!

props: ({params}) => ({ id: Number.parseInt(params.id) || 0 })