How can I reload component when route is changed but the route is same?
I don’t have :key params on ion-router-outlet so I can’t reload data in my component when I click on button that point to the same component but with different id:
Component: Profile
Routes:
FROM
/profile/6032255274ca884295689e82
TO
/profile/6032255274ca884295651e82
Result:
are we supposed to provide a suggestion by just looking at screenshots? I a little bit of code goes a long way!!
There are 2 components Parent (App.vue) → Child (Profile.vue)
Url: /profile/60322956c35f3018e17093b5
From App.vue, i search an user from searchbar and I click on one of the result:
The click calls goToPage function in App.vue
goToPage(id, type) {
.....
this.$router.push({name: nameCapitalized, params: {id: id}})
}
NEW URL:
/profile/6032255274ca884295689e82
It seems that it doesn’t refresh data because I call an already mounted component (Profile.Vue) and does not understand that I need to load another profile.
Profile.vue
}
},
created() {
this.getUserProfile()
},
you should watch for changes in the id and reload the data in the page… would need to see more code to provide additional insight… maybe use a computed property to render the updates
Sorry to revive an old topic, but for anyone else stumbling across this. You can use ionViewDidEnter() from Vue Lifecycle - Ionic Documentation to call methods and update page data for each time the view is loaded.
I had a very similar implementation with IDs and my equivalent solution was to have both created and ionViewDidEnter call an initialise function to get fresh data.
Hope this helps someone and sorry again for the revival.
...
created() {
this.initialiseComponent();
},
ionViewDidEnter() {
this.initialiseComponent();
},
methods: {
....
initialiseComponent() {
this.getProfile(this.$route.params.id)
},
...
},
...