Vue component doesn't update on route URL parameter change

Question

So I have a component which executes code once it's mounted like this:

mounted(){
  axios.get('/markers/' + this.username)
    .then(response => {
      this.markers = response.data.markers
    }).catch((error) => console.log(error));
}

And I get the username like this:

username: this.$route.params.username

however, if I change the URL parameter, the username doesn't update so my AXIOS call doesn't update my markers. Why is this happening?

You might need to use Dynamic Route Matching, see if this post helps. — Yom T.
– Yom T., Commented Jan 18, 2019 at 9:46
Did you set the key prop on the <router-view /> component? i.E. <router-view :key="$route.fullPath" />? This might be needed for the mounted hook to trigger when switching between view components. — r0skar
– r0skar, Commented Jan 18, 2019 at 9:48
What do you mean by "The username doesn't update". I don't see any code here that updates the username property, could you include the whole file? What does your data() function look like, why not just call /markers/' + this.$route.params.username Is there any errors happening? This needs more information please. — user5283119
– user5283119, Commented Jan 18, 2019 at 9:48
@swonder, he meant that if you go to route /markers/john, and then you navigate to /markers/smith, it will still show john — ljubadr
– ljubadr, Commented Jan 18, 2019 at 9:51
Well since the username is set based the username param in the URL, I assumed it would update automatically if I change the url, however, it doesn't. Nothing else in my code is relevant to my issue. Exactly what ljubadr said. — Onyx
– Onyx, Commented Jan 18, 2019 at 9:52

whoacowboy · Accepted Answer · 2022-09-26 17:26:42Z

13

The reason is simple, even thought the URL is changing the component is not, VueJS is basically reusing the component and therefore not calling the mounted() method again.

Usually you can just setup a watcher and refactor a bit your code

methods: {
    fetchData(userName) {
        axios.get('/markers/' + this.username)
        .then(response => {
            this.markers = response.data.markers
        }).catch((error) => console.log(error));
    }
},
watch: {
    '$route.params': {
        handler(newValue) {
            const { userName } = newValue
   
            this.fetchData(userName)
        },
        immediate: true,
    }
}

EDIT: Added the immediate true option and removed the mounted() hook

edited Sep 26, 2022 at 17:26

whoacowboy

7,5077 gold badges48 silver badges84 bronze badges

answered Jan 18, 2019 at 9:57

Borjante

10.7k6 gold badges40 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user5283119 Over a year ago

Pretty much what I said in my comment, I didn't think the component would "mount" again if you're changing to the exact same component. This confirms that. Nice work.

ljubadr Over a year ago

I'm curious, will the watch handler() fire if user goes to completely different route?

Borjante Over a year ago

Not if the new route renders another component

Collectives™ on Stack Overflow

Vue component doesn't update on route URL parameter change

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related