Conditional stepper-content and form content with Vuetify

Question

I am currently using Vue Js with Vuetify and Vuelidate for an SPA. I have a form to create a new Account, which is pretty standard.

What I have decided to do though is break the form into steps and utilise the v-stepper component from Vuetify.

The part I am stuck on is how the users choices as they fill in the form can dictate the steps. For example;

Using a v-if I determine if the v-text-field is needed to be shown, what I am unsure of is how this will effect the forms data/model that will eventually be sent in a POST.

Am I looking at this in the right way? or can someone suggest a better approach?

Code:

<template>
 <v-form v-model="stepCount">
  <-stepper-header>
   <v-stepper-step step="1" :complete="stepStage > 1">
     Account Details
   </v-steper-step>
   <v-divider></v-divider>
   <v-stepper-step step="2" :complete="stepStage > 2">
     Personal Details
   </v-steper-step>
  </v-stepper-header>
  <v-stepper-content step="1">
   <v-text-field>
    Usual filler for a text field {Username}
   </v-text-field>
   <v-text-field>
    Usual filler for a text field {Password}
   </v-text-field>
   <v-text-field>
    Usual filler for a text field {Age}
   </v-text-field>
   <v-text-field>
    label="Gender"
    v-model="gender
    :error-messages="genderErrors"
    @intput="v.gender.$touch()"
    @blur="v.gender.$touch()"
   </v-text-field>
  </v-stepper-content>
  <v-stepper-content>
   <v-text-field v-if="gender == 'F'">
    label="Bra Size"
    v-model="braSize
    :error-messages="braSizeErrors"
    @intput="v.gender.$touch()"
    @blur="v.gender.$touch()"
   </v-text-field v-else>
   <v-text-field>
    Usual filler for a text field {t-ShirtSize}
   </v-text-field>
  </v-stepper-content>

Thanks in advance.

qw3n qw3n · Accepted Answer · 2017-10-27T03:41:56

It seems like your asking several things here so here is what I think the answer your looking for is.

To control the stepper flow you can either set the stepStage to variables like steppers shows or use a computed variable that returns the state based on the collected data.

Computed state

computed:{
  stepStage(){
    if(/*certain content is correctly filled and a next button has been clicked*/)return 1
    if(/*check another computed variable that decides if the form is complete*/)return 2
    //etc
  }
}

As far as v-if statements in forms. It shouldn't affect a submitted form since it actually removes or inserts an element based on the value as stated in the first paragraph of this section. Note v-stepper doesn't use v-if.
For more control you may consider saving the data in the state of the component and then use javascript to do the actual submission. This allows you to have complete control over what is sent to the server.

Conditional stepper-content and form content with Vuetify

1 Answers