Reset form state VueJS and VueRouter

Question

I am currently working on a step by step registration created with VueJS and VueRouter.

The basic premise of the form is that a user has to select a signup option before proceeding to enter his personal details. However, I would like the form to be reset every time a different sign up option is selected.

VueJs + VueRouter Multi Step Form

/**
 *
 * @type {Vue}
 */
let page2Component = Vue.component('pageTwo', {
    data: function() {
        return {
            step1: {
                firstname: '',
                lastname: ''
            }
        }
    },
    template: `<div>
<h2>Registration</h2>
    <form action="" method="post" role="form">
        <legend>Details</legend>

        <div class="form-group">
            <label for="firstname">First name</label>
            <input type="text" class="form-control" name="firstname" id="firstname" placeholder="First name..." v-model.trim="step1.firstname">
        </div>
        <div class="form-group">
            <label for="lastname">Last name</label>
                <input type="text" name="lastname" class="form-control" id="lastname" placeholder="Last name..." v-model.trim="step1.lastname">
        </div>

    </form>
<div>
<router-link to="/" class="btn btn-default">Back</router-link>
<router-link to="/" class="btn btn-primary">Next Page</router-link>
</div>
</div>`,
    created: function () {

    },

    methods: {
        resetUserDetails: function() {
            this.step1.firstname = '';
            this.step1.lastname = '';
        }
    }
});

/**
 *
 * @type {Vue}
 */
let page1Component = Vue.component('pageOne', {
    data: function() {
        return {
            selectedSignUpOption: ''
        }
    },
    template: `<div>
    <h2>Registration</h2>
    <form action="" method="post" role="form">
        <legend>Sign Up Options</legend>

        <div class="form-group">
            <div>
                <div class="radio">
                    <label>
                        <input type="radio" name="signup_option" value="user" v-model.trim="selectedSignUpOption"> Register As A User
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="signup_option" value="content-editor" v-model.trim="selectedSignUpOption"> Register As A Content Editor
                    </label>
                </div>
            </div>
        </div>

    </form>
    <div>
        <router-link to="/page2" class="btn btn-primary" v-bind:disabled="!signupOptionSelected">Next Page</router-link>
    </div>

</div>`,
    created: function () {

    },

    watch: {
        '$route'(to, from) {
            // react to route changes...
            // don't forget to call next()
            console.log('to: ', to);
            console.log('from: ', from);
            console.log(this);
        },

        selectedSignUpOption: function() {
            console.log(this);
            console.log(this.selectedSignUpOption);
        }
    },

    computed: {
        signupOptionSelected: function() {
            return this.selectedSignUpOption !== '';
        }
    }
});

/**
 *
 * @type {Vue}
 */
let wizardComponent = Vue.component('wizardForm', {
    template: `<div>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>`,
    created: function () {
        let children = [];
        children.push({path: '/', component: page1Component});
        children.push({path: '/page2', component: page2Component});
        router.addRoutes(children);
    }
});

/**
 * Vue App Initialisation
 */

Vue.config.devtools = true;
Vue.use(VeeValidate);

const routes = [];

const router = new VueRouter({
    routes // short for routes: routes
});

console.log('routes', routes);

document.addEventListener('DOMContentLoaded', function () {

    /**
     *
     */
    let vm = new Vue({
        el: '#app',
        router,
    });

});

I have included a link to the form that I am working on. Any one have any idea as to how I can achieve this? Ideally, I would like to be able to call the resetUserDetails method in the page2Component when the sign up option is different to the last one that was selected.

Any suggestions would be appreciated. I am using VueJS 2 btw.

Thanks,

Emmanuel

you want to reset the form only when different option is selected or every other time when the user navigates back to options page and return to form page? — Pradeepb
– Pradeepb, Commented Jun 3, 2017 at 12:52
@Pradeepb I would like to reset the form only when a different option is selected. — user1297396
– user1297396, Commented Jun 3, 2017 at 12:55
you should pass the selectedOption value for this to work. check this. Let me know if this helps you. — Pradeepb
– Pradeepb, Commented Jun 3, 2017 at 13:44
@Pradeepb that's awesome... I had actually started working a similar solution, using an event bus of sorts, but yours is a lot simpler — user1297396
– user1297396, Commented Jun 3, 2017 at 13:58

Pradeepb · Accepted Answer · 2017-06-03 14:01:46Z

1

For this to work you should pass selected value as to second component.

your route config will look like this

children.push({path: '/:option/page2', component: page2Component});

form component

watch: {
    '$route.params.option'(to, from) {
        if((this.prevSelection && this.$route.params.option) && (this.$route.params.option !== this.prevSelection)){
            this.prevSelection = this.$route.params.option
            this.resetUserDetails()
        }
    }
}

For more information please have a look at this

answered Jun 3, 2017 at 14:01

Pradeepb

2,5723 gold badges28 silver badges48 bronze badges

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

Collectives™ on Stack Overflow

Reset form state VueJS and VueRouter

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related