Vuetifyでの条件付きステッパーコンテンツとフォームコンテンツ

Question

現在、VuetifyとVuelidateでVue Jsを使用しています。 私は新しいアカウントを作成するためのフォームを持っていますが、これはかなり標準的です。

私は、フォームをステップに分割し、Vuetifyのv-stepperコンポーネントを利用することに決めました。

私が立ち往生している部分は、フォームに記入したユーザーの選択によって手順が決まります。例えば;

v-テキストフィールドを表示する必要があるかどうかを判断するには、最終的に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

ここにいくつかの質問をしているようですので、探している答えがここにあります。ステッパーは、あなたがsteppersショーのような変数にstepStageを設定したり、収集したデータに基づいて状態を返す計算された変数を使用することができますいずれかの流れを制御するために

1. 。状態

   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を使用することを検討してください。これにより、サーバーに送信される内容を完全に制御することができます。