[Vuejs]-Data Value loads only on reloading, while using VueJs v-bind

by

0👍

✅

When you move between routes Vue will try to reuse the same components where possible. The mounted hook is only called the first time a component renders, so it won’t be called again if the component hasn’t changed.

You would need to watch for when the route param changes:

watch: {
  '$route.params.id' () {
    // reload the data here
  }
}

A scenario that is almost identical to yours is described in the documentation: https://router.vuejs.org/guide/advanced/data-fetching.html#fetching-after-navigation. In that case it uses a watch on the whole of $route rather than specifically targeting $route.params.id but the end result is much the same.

Even better would be to pass the id as a prop to the component using the router’s props: true setting to remove the direct dependency on $route, but even then you will need to watch for when the prop value changes. See https://router.vuejs.org/guide/essentials/passing-props.html for more information.

Leave a comment