Question

我目前正在使用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 中调用 resetUserDetails 方法。

任何建议将不胜感激。我正在使用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()
        }
    }
}

有关详细信息，请查看this

重置表单状态VueJS和VueRouter

1 个答案: