Question

我正在使用Vuelidate进行表单验证。

这是一个多步骤表单，但是在没有输入有效的步骤2中，当我单击下一步按钮时，无法进入步骤3。

我的代码可能有什么问题？

    <section v-show="step === 1">
        <h3>Step 1</h3>
        <div class="name">
            <h4>Name</h4>
            <input v-model="name" @blur="$v.name.$touch" type="text" class="form-control form-control-lg">
            <p v-if="$v.name.$error" class="error-msg">Please fill the name</p>
        </div>
    </section>
    <section v-show="step === 2" class="step2">
        <h3>Step 2</h3>
        ...
    </section>
    
    <section v-show="step === 3" class="step3">
        <h3>Step 3</h3>
            <div class="tele">
                <label for="contact-tele">Telephone</label>
                <input v-model="phone" @blur="$v.phone.$touch" type="text" class="form-control form-control-lg">
                <p v-if="$v.phone.$error" class="error-msg">Please fill your telephone number</p>
            </div>
    </section>

<button class="next-step no-print" @click.prevent="nextStep" v-if="step != totalSteps>Next Step</button>

我的Vue代码

methods: {
        nextStep: function() {
            if (this.step = 1) {
                if (this.$v.name.$invalid) {
                    return false;
                } else {
                    return this.step = 2;
                }
            }

            if (this.step = 3) {
                if (this.$v.phone.$invalid) {
                    return false;
                } else {
                    return this.step = 3;
                }
            }
            this.step++;
        },
   
    },

Answer 1

这里，您使用的是单个=，该值将要检查的值（1和3）分配给this.step，而您应该使用三重===来检查值。

//if (this.step = 1) {
if (this.step === 1) {
    if (this.$v.name.$invalid) {
        return false;
    } else {
        return this.step = 2;
    }
}

//if (this.step = 3) {
if (this.step === 3) {
    if (this.$v.phone.$invalid) {
        return false;
    } else {
        return this.step = 3;
    }
}
this.step++;

进一步了解=，==和=== here之间的区别。

Answer 2

在条件中使用$(document).ready(() => { var person = []; $('#submit').click(() => { var objKey = 0;而不是===。

，并尽量避免出现else情况，因为最后要使用if(this.step === 1)。它将增加步长。

this.step++

审核：多步表单验证

2 个答案: