view not updated after the url change

user_13982689 0
Viewed 114

I'm trying to access users of different users using my search input where I can type the name of the user and then click on any of the result and navigate to their page. The first user page is displayed but when I search for another user and click on the user name then the route gets updated in the address bar but the view in the window still displays the earlier user. what am I doing wrong in my code?

<template>
  <div>
    <custom-component :users="users" @input="onClick"></custom-component>
  </div>
</template>

<script>
export default {
 methods: {
    onClick(id) {
      this.$router.push(`/user/${id}`);
    },
 },
 watch: {
    $route(to, from) {
      if (to.params.id !== from.params.id) {
        this.$router.push(to.fullPath);
      }
    },
  },
};
vue-router vuejs2 vuejs3 vue.js
1 Answers

You need to change watch and fetch the users list again. No need to push the router again in watch.

watch: {
  $route(to, from) {
    // react to route changes...
    let self = this;
    self.getUsers(); // For example
  }
},
user_138352580
Related