Проверка правильности формы шага и приращения магазина в Vuex - PullRequest
Новая
       49

Проверка правильности формы шага и приращения магазина в Vuex

0 голосов
/ 24 апреля 2020

Я создал пошаговую форму в Vuex, состоящую из трех шагов, представленных в виде компонентов StepFormSectionOne, StepFormSectionTwo и StepFormSectionThree и компонента навигации, StepFormNav. Вот основной родительский компонент StepForm: 

<template>
    <form class="step-form">
        <transition appear name="fade" mode="out-in">
            <StepFormSectionOne v-if="currentStep == 1" :key="currentStep" :form="form"/>
            <StepFormSectionTwo v-if="currentStep == 2" :key="currentStep" :form="form"/>
            <StepFormSectionThree v-if="currentStep == 3" :key="currentStep" :form="form"/>
        </transition>

        <StepFormNav :currentStep="currentStep" :totalSteps="totalSteps"/>
    </form>
</template>

<script>
    //all the imports here...

    export default {
        name: 'StepForm',
        components: {
            //all the components here...
        },
        computed: mapState({
            form: state => state.form,
            currentStep: state => state.currentStep,
            totalSteps: state => state.totalSteps,
        })
    }
</script>

Для каждого из вышеупомянутых компонентов есть элемент input типа submit, с id="submit-form" и это скрытый , потому что я пытаюсь отправить каждый шаг из внешнего label. Следующий код показывает структуру ядра любого из компонентов StepFormSectionOne, StepFormSectionTwo и StepFormSectionThree: 

<template>
    <form class="step-form-section">    
        //all the inputs here...

        <input type="submit" id="submit-form" class="hidden"/>
    </form>
</template>

<script>    
    export default {
        name: 'StepFormSectionOne',
        props: {
            form: Object
        },
        computed: {
            //store properties with getters and setters...
        }
    }
</script>

Наконец, у меня есть компонент StepFormNav: здесь вы найдете label с атрибутом for = "submit-form", поэтому он связан с элементом input внутри шагов. Это label содержится в button. Вот компонент StepFormNav: 

<template>
    <nav class="step-form-nav">
        <button v-if="currentStep <= totalSteps" @click.prevent="nextStep" class="right" :type="currentStep == totalSteps ? 'submit' : 'button'">
            <label v-if="currentStep < totalSteps" for="submit-form" :key="1">Next Step</label>
        </button>
    </nav>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
    name: 'StepFormNav',
    props: {
        currentStep: Number,
        totalSteps: Number
    },
    methods: {
        ...mapMutations({
            nextStep: 'incrementStep' //it simply increments 'currentStep' in the store
        })
    }
}
</script>

Вот где мне нужно решить проблему: если я добавлю @click.prevent="nextStep" к button, независимо от того, будут ли элементы input на шаге заполнены (но обязательны ), следующий шаг будет обработан; в противном случае, если я добавлю @click="nextStep" к button, он действительно подтвердит form, но как только весь шаг будет действителен, пропеллер currentStep не будет увеличен для получения следующего шага. Как сделать так, чтобы оба действия (проверка и увеличение currentStep только после того, как форма действительна) выполнялись вместе?

...