RedJohn RedJohn - 10 months ago 194
Javascript Question

Vue js rerender the same component when changing route

I have one auth component that I am using both in the login and the signup route.

const routes = [{
path : '/',
name: 'home',
component: Home
}, {
path : '/signin',
name: 'signin',
component: Auth
path : '/signup',
name: 'signup',
component: Auth

If for example, I'm on the login page The problem is if I type something in the text inputs and go to the signup the text is still there, how I force the component to reinitialize?

Answer Source

vuejs caches rendered component. you don't provide Auth component code, but i think the following helps you.

     <input type="text" ID="username" v-model="usernameinput">
     <!-- other text boxes and inputs -->
export default {
    name: 'Auth',
    //component code .....
    data: function() {
        return {
            usernameinput: '',
            //and other stuff
    watch: {
        // call method if the route changes
        '$route': 'reInitialize'
    methods: {
        reInitialize: function() {
            this.usernameinput = '';
            //and so on
    //remainig component code

also there is another posibilty, may be you are using dynamic components and keep-alive is true.