重置表单状态VueJS和VueRouter

Question

目前，我正在逐步使用VueJS和VueRouter创建注册。

表单的基本前提是用户在输入个人信息之前必须选择一个注册选项。但是，每次选择不同的注册选项时，我都希望重新设置表单。

VueJs + VueRouter多步形式

/**
 *
 * @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,
    });

});

我已经包括了一个链接到我正在处理的表格。有谁知道我是怎么做到的？理想情况下，当注册选项与所选的最后一个选项不同时，我希望能够在page2Component中调用page2Component方法。

如有任何建议，将不胜感激。我使用的是VueJS 2。

谢谢,

伊曼纽尔

Answer 1

为此，您应该将选定的值传递给第二个组件。

您的路由配置如下所示

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

表单组件

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()
        }
    }
}

欲了解更多信息，请访问这