I have a userlist page with various profiles, including my own. A button is supposed to appear only when viewing my own profile.
The issue arises when switching from a different profile to my own (changing the router parameter) - the button should show up, but it doesn't work in reverse (my-profile -> another profile the button disappears).
Currently, the button only shows up when I switch from a different route (e.g., from the homepage to my profile).
On my Profile.vue
<v-btn
v-if= "isUserProfile()"
outline
large
fab
v-on="on"
color="indigo">
<v-icon>edit</v-icon>
</v-btn>
A watcher in Profile.vue checks for changes in the URL/router parameters.
watch: {
'$route.params.username': {
immediate: true,
handler (value) {
this.username = value
this.getId()
this.isUserProfile()
}
}
},
Using the method:
isUserProfile () {
return (this.$store.state.route.params.username === this.$store.state.user.username)
},
The button should appear every time I switch to my own profile from another one since it works in the opposite scenario. However, there seems to be a problem as demonstrated in this example gif where my profile is "123123":
https://gyazo.com/cf47036bfb60cc6490c538e50a32db81
Manually changing the parameters in the URL by switching between profiles reveals the inconsistency of the button display. It should always be visible when switching back to my profile.