Vuelidate:多步表单验证

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

这里使用的是单个=，它为this.step分配要检查的值(1和3)，而应该使用三重===来检查值。

//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++;

阅读更多关于=、==和===这里之间的区别的文章。

Answer 2

在条件中使用===而不是=。

if(this.step === 1)

同时也要尽量避免其他情况，因为最终您将拥有this.step++。它将增加这一步。

if (this.step = 1 && this.$v.name.$invalid) return false

if (this.step = 3 && this.$v.phone.$invalid) return false

this.step++;