Subscribe on changes!

Problem with dynamic routing and computed properties

avatar
May 20th 2021

Version

3.1.0-beta.3

Reproduction link

https://codesandbox.io/s/gracious-grothendieck-jbinu

Steps to reproduce

Just go DestinationDetails.vue and check why the dynamic routing param, coming from router/index.js cannot be passed to the computed property in the same component file.

What is expected?

Showing me how to fix the problem when it comes to dynamic routing

What is actually happening?

Hello! I'm watching currently this tutorial on https://vueschool.io/courses/vue-router-for-everyone?friend=vuerouter# about routing in Vue Js (I'm a newbie just to say), so everything was fine until I got this error Uncaught (in promise) TypeError: Cannot read property 'name' of undefined which was coming from the fact when the dynamic routing was set and the store.js (which is not in the sandbox, but I get the exact files from the course repo) was import; after that when a computed property was generated to find the exact element in the array coming from store.js, I got this error; also a warning that this is likely a Vue internals bug. So I guess the mistake is coming from the computed properties and inability to generate one with a dynamic routing parameter like the id -

" computed: { destination() { return store.destinations.find( (destination) => destination.id === this.destinationId ); }, }, " the course file are little bit differently structured but anyway I cannot solve the problem. I think the data is coming after it was being used; so the data is being used but it is not there yey (that's my guess); I've tried with mounted() to set new property on data() function but nothing. Hopefully someone will clear for me what is going on in here? Thanks in advance :)

avatar
May 20th 2021

Okay if someone is seeing something else, please post it in here! The problem was (or I think that was the problem) that I use the strict operator (===) and the values which was coming from the router parameters was string; the id from store.js was an integer. So I when I use comparison operator (==) everything was fine!

avatar
May 20th 2021

you are complaining about vue 3.1.0 beta and in repro you are using vue 2

avatar
May 20th 2021

I was using Vue 3, I just forgot to set the version in the sandbox. Sorry about that.