javascript - 重置表单状态 VueJS 和 VueRouter

Question

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

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

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

});

我已经包含了一个指向我正在处理的表单的链接。任何人都知道我如何实现这一目标？理想情况下，当注册选项与上次选择的选项不同时，我希望能够调用 page2Component 中的 resetUserDetails 方法。

如有任何建议，我们将不胜感激。顺便说一句，我正在使用 VueJS 2。

谢谢，

以马内利

Answer 1

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

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

有关更多信息，请查看 this