RedJohn RedJohn - 9 days ago 5
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

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

<template>
     <input type="text" ID="username" v-model="usernameinput">
     <!-- other text boxes and inputs -->
</template>
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.