Vue.js - マルチステップフォームの基礎を設定する

Question

Vue.jsを使用してRails 5アプリケーション用の単純なマルチステップフォームを作成しようとしています。 Vueを使うのは初めてのことなので、正しく動作させるにはちょっと固執しています。

今私は、次の操作を実行しようとしています：

1. [次へ]ボタンをクリックして、クラスactiveを持つようにNをステップステップ1からli要素を設定します。
2. 前のボタンをクリックして、かなりシンプルなステップNから

をクラスactiveを削除します。ここで私はこれまで持っているものだが、私はどこここから行くかわからないん

その後、

import Vue from 'vue/dist/vue.esm' 

document.addEventListener('DOMContentLoaded',() => { 
    Vue.component('step-item', { 
    props: ['step'], 
    template: '<li :class="{active: isActive}">{{ step.text }}</li>', 
    data: function() { 
     return { 
     isActive: true // Right now I set them all to true 
     } 
    } 
    }) 

    Vue.component('step-button', { 
    props: ['name'], 
    template: "<input :name='name' :value='name' @click='counter += 1' type='button' class='btn btn-secondary' />" 
    }) 

    const progress = new Vue({ 
    el: '#vue-listing', 
    data: { 
     counter: 0, 
     stepList: [ 
     {id: 0, text: 'Basics'}, 
     {id: 1, text: 'Location'}, 
     {id: 2, text: 'Images'}, 
     {id: 3, text: 'Other'} 
     ] 
    }, 
    methods: { 
     addProgress: function() {return true}, // todo 
     delProgress: function() {return true} // todo 
    } 
    }) 
}) 

私は自分のフォーム

<div id="vue-listing"> 
    <!-- Display the progress through the form --> 
    <ul class="text-center" id="listing-progressbar"> 
    <step-item v-for="item in stepList" :step="item" :key="item.id"></step-item> 
    </ul> 

    <fieldset> 
    Step 1 
    <step-button name="Next"></step-button> 
    </fieldset> 

    <fieldset> 
    Step 2 
    <step-button name="Previous"></step-button> 
    <step-button name="Next"></step-button> 
    </fieldset> 

</div> 

は、今、私が取得する方法についてこだわっている必要があり次と前のボタンを使用して、現在のステップからアクティブを追加または削除します。 最終的には、手順に応じて<fieldset>要素を非表示にして表示する必要があります。

ご協力いただきありがとうございます。

おかげ

Answer 1

このアイデアの簡単な実装は次のようになります。

console.clear() 
 

 
document.addEventListener('DOMContentLoaded',() => { 
 
    Vue.component('step-item', { 
 
    props: ['step', 'active'], 
 
    template: '<li :class="{active}">{{ step.text }}</li>', 
 
    }) 
 

 
    const progress = new Vue({ 
 
    el: '#vue-listing', 
 
    data: { 
 
     activeStep: 0, 
 
     stepList: [ 
 
     {id: 0, text: 'Basics'}, 
 
     {id: 1, text: 'Location'}, 
 
     {id: 2, text: 'Images'}, 
 
     {id: 3, text: 'Other'} 
 
     ] 
 
    }, 
 
    methods: { 
 
     addProgress: function() {return true}, // todo 
 
     delProgress: function() {return true}, // todo 
 
    }, 
 
    }) 
 
})

.active { 
 
    color: Blue 
 
}

<script src="https://unpkg.com/vue@2.4.2"></script> 
 
<div id="app"> 
 
    <div id="vue-listing"> 
 
    <!-- Display the progress through the form --> 
 
    <ul class="text-center" id="listing-progressbar"> 
 
     <step-item v-for="item, ndx in stepList" 
 
       :step="item" 
 
       :key="item.id" 
 
       :active="ndx === activeStep"> 
 
     </step-item> 
 
    </ul> 
 

 
    <fieldset v-if="activeStep === 0"> 
 
     Step 1 
 
    </fieldset> 
 

 
    <fieldset v-if="activeStep === 1"> 
 
     Step 2 
 
    </fieldset> 
 
    
 
    <fieldset v-if="activeStep === 2"> 
 
     Step 3 
 
    </fieldset> 
 
    
 
    <fieldset v-if="activeStep === 3"> 
 
     Step 4 
 
    </fieldset> 
 
    <hr> 
 
    
 
    <button @click="activeStep--" :disabled="activeStep === 0">Prev</button> 
 
    <button @click="activeStep++" :disabled="activeStep === stepList.length - 1">Next</button> 
 
    </div> 
 
</div>

私はstep-buttonを排除し、個々のステップのうち、ナビゲーションを動かしました。代わりに、現在のアクティブステップを増減するボタンだけがあります。さらに、必要に応じてフィールドセットが表示/非表示になります。個々のステップがアクティブであるかどうかは、activeプロパティに渡されます。