tarang19
2 months ago
410
3
Vue

Dynamic tab change on form submit in vue.js

Posted 2 months ago by tarang19

Hello Friend i wanted to create bootstrap 4 pills dynamic active and show when user fill form like (From - steps)

Can anyone tell me hear is my present code in vue

<template>
    <div class="container-fluid" id="dashboard">
    <div class="container">
        <div class="row card shadow-lg p-3 mb-5 bg-white rounded">
            <div class="col-md-12 card-body">
                <ul class="nav nav-pills nav-fill">
          <li class="nav-item">
            <a :class="[{ active: isActive }, 'nav-link']" data-toggle="pill" href="#Preferences" role="tab" aria-controls="pills-Preferences" aria-selected="true">Preferences</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="pill" href="#Personal" role="tab" aria-controls="pills-Personal" aria-selected="false">Personal</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="pill" href="#Gardian" role="tab" aria-controls="pills-Gardian" aria-selected="false">Gardian</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="pill" href="#Acadmic" role="tab" aria-controls="pills-Acadmic" aria-selected="false">Acadmic</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="pill" href="#fee" role="tab" aria-controls="pills-fee" aria-selected="false">Fee</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="pill" href="#declaration" role="tab" aria-controls="pills-declaration" aria-selected="false">Declaration</a>
          </li>
        </ul>
        <div class="tab-content mt-3">
        <div :class="[{ active: isActive, show: isShow }, 'tab-pane fade mt-5']" id="Preferences" role="tabpanel" aria-labelledby="Preferences-tab">
          <preferences></preferences>
        </div>
        <div class="tab-pane fade mt-5" id="Personal" role="tabpanel" aria-labelledby="Personal-tab">
          <personal></personal>
        </div>
        <div class="tab-pane fade mt-5" id="Gardian" role="tabpanel" aria-labelledby="Gardian-tab">
          <gardian></gardian>
        </div>
        <div class="tab-pane fade mt-5" id="Acadmic" role="tabpanel" aria-labelledby="Acadmic-tab">
          <acadmic></acadmic>
        </div>
        <div class="tab-pane fade mt-5" id="fee" role="tabpanel" aria-labelledby="fee-tab">
          <fee></fee>
        </div>
        <div class="tab-pane fade mt-5" id="declaration" role="tabpanel" aria-labelledby="declaration-tab">
          <declaration></declaration>
        </div>
      </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import preferences from '../Form/Preferences'
import personal from '../Form/personal.vue'
import gardian from '../Form/gardian.vue'
import acadmic from '../Form/acadmic.vue'
import fee from '../Form/fee.vue'
import declaration from '../Form/declaration.vue'
export default {
  data(){
    return{
      isActive: true,
      isShow: true,
      preferences: [],
      personal: [],
      academic: [],
      declaration: [],
      fee: [],
      gardian: [],
    }
  },
    components: {
        preferences,
        personal,
        gardian,
        acadmic,
        fee,
        declaration
    },

    mounted(){
      let self = this;
      self.check_form_status();
    },

    methods: {
      //Check_form_status Check all status And filled form 

      check_form_status(){
        let self = this;
        axios.all([
          axios('/form'), //preferences
          axios('/personal'),
          axios('/academic'),
          axios('/declaration'),
          axios('/fee'),
          axios('/gardian')
          ])
          .then(axios.spread(( form, personal, academic, declaration, fee, gardian ) => {
            self.preferences = form.data,
            self.personal = personal.data,
            self.academic = academic.data,
            self.declaration = declaration.data,
            self.fee = fee.data,
            self.gardian = gardian.data

            if(self.preferences.is_saved){
              this.isActive =  false;
              this.isShow = false;
            }
          }))
      }
    },
}
</script>

<style scoped>

</style>

Please sign in or create an account to participate in this conversation.