32 calendar multistep form / マルチステップフォームを実装

[hasyrails]

vue.jsでマルチステップの入力フォーム作成(基礎編)

[hasyrails]

入力項目は何にするか

1つ目のステップの入力フォームでは名前(firstName, lastName)を入力、2つ目のステップの入力フォームではEmail、電話番号を入力、3つ目は誕生日を入力するシンプルなものです。4つ目では1〜3で入力した項目の値を一括表示させます。

[hasyrails]

Registerコンポーネント内に実装していく

[hasyrails]

入力項目

data(){
    return{
      form: {
    userName: null,  //  ユーザー名
        email: null,  //  メールアドレス
        password: null, //  パスワード
        passwordConfirmation: null  //  パスワード確認
    }
 }

[hasyrails]

フォームに入力した値をformオブジェクトへ格納成功

// Register.vue

<pre><code>{{form}}</code></pre>

でformオブジェクトの値を表示

[hasyrails]

ステップ移動を実装

// Register.vue

<button class="btn btn-primary" @click="backStep" >Back</button>
<button class="btn btn-primary" @click="nextStep" >Next</button>

 methods:{
    backStep:function(){
          this.stepNumber--;
      },            
      nextStep:function(){
          this.stepNumber++;
      },
    }

STEP: 0, 4の時のボタン表示が不要

v-showで STEP:0,4の時非表示に変更

// Register.vue

<button class="btn btn-primary" @click="backStep" v-show="stepNumber != 1">Back</button>
<button class="btn btn-primary" @click="nextStep" v-show="stepNumber != 4">Next</button>

[hasyrails]

3STEPフォーム入力　→　確認画面まで実装