Question

我目前正在将Vue Js与Vuetify和Vuelidate一起用于SPA。我有一个表单来创建一个非常标准的新帐户。

我决定做的是将表格分解为步骤并使用Vuetify的v-stepper组件。

我坚持的部分是用户在填写表格时的选择如何决定步骤。例如;

使用v-if如果我确定是否需要显示v-text-field，我不确定这将如何影响最终将在POST中发送的表单数据/模型。

我是以正确的方式看待这个吗？或者有人可以建议更好的方法吗？

代码：

<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>

提前致谢。

Answer 1

好像你在这里询问了几件事情，所以我认为这就是你想要的答案。

要控制步进器流，您可以将stepStage设置为steppers显示的变量，也可以使用根据收集的数据返回状态的计算变量。

计算状态

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

至于表单中的v-if语句。它不应该影响提交的表单，因为它实际上会根据此section第一段中所述的值删除或插入元素。注意v-stepper不使用v-if。
要获得更多控制权，您可以考虑将数据保存在组件的状态中，然后使用javascript进行实际提交。这使您可以完全控制发送到服务器的内容。

带有Vuetify的条件步进内容和表单内容

1 个答案: