vue.jsvuejs2vue-componentvue-router

load components dynamically based on choice in the current step in Vue-Form-Wizard


I'm trying to load components dynamically based on choice in the current step. For example, the user has 3 choices in the first step and if he chooses choice one, component One will be loaded in 2end step and so on. The question is here is it possible to do something like this? if it is how to do it?


Solution

  • You just need to check the value of the radio button once you click the choices using v-model in the next step. It uses v-if so the components that are not selected will not render.

    Check This. I haven't tested it but it looks like this.

    <template>
      <div>
         <form-wizard @on-complete="onComplete">
            <template slot="step" slot-scope="props">
               <wizard-step :tab="props.tab"
                           :transition="props.transition"
                           :key="props.tab.title"
                           :index="props.index">
               </wizard-step>
              </template>
               <tab-content  title="Step1" :before-change="checkStep1">   
                  One <input type="radio" id="one" v-model="selectedOption" :value="1" >
                  Two <input type="radio" id="two" v-model="selectedOption" :value="2" >
                  Three <input type="radio" id="three" v-model="selectedOption" :value="3" >
               </tab-content>
               <tab-content  title="Step2" >   
                  <component1 v-if="selectedOption === 1" />
                  <component2 v-if="selectedOption === 2" />
                  <component3 v-if="selectedOption === 3" />
               </tab-content>
         </form-wizard>
      </div>
    </template>
    <script>
    import Vue from 'vue'
    import VueFormWizard from 'vue-form-wizard'
    import component1 from '@/compononents/component1'
    import component2 from '@/compononents/component2'
    import component3 from '@/compononents/component3'
    
    Vue.use(VueFormWizard)
    
    export default {
      name: 'MyComponent',
      components: {
        component1,
        component2,
        component3
      },
      data () {
        return {
          selectedOption: 1
        }
      },
      methods: {
        checkStep1 () {
           //Add validation of step 1 here and return true or false
        }
      }
    }
    
    </script>