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?

回答1:

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>

回答2:

You can dynamically load components like this:

(assuming you use webpack)

<template>
            <!-- Just a combo to pick the string 'one' or 'two' into currentComponent variable -->
            <v-select v-model="currentComponent" :items="components" solo/>

            <!-- 1 - This component is a dynamic one: -->
            <component :is="currentComponent"/>
</template>

<script>

    // 2 - Importing dynamically
    const one = () => import(/* webpackChunkName: "one" */ "../vue/One.vue")
    const two = () => import(/* webpackChunkName: "two" */ '../vue/Two.vue')

    export default {
        name: "toto",
        components: {one, two},
        data: () => ({
            components: ['one', 'two'],
            currentComponent: null
        })
    }
</script>

1 - Using 'component' in template will dynamically display the component named by the value of 'currentComponent' variable. You can pass props etc.

2 - Using promises when importing components will load component from server only when used. Even if you have 20 big components to conditionnaly display, only used components at runtime will be loaded from server.

3 - Note you can also use one and two components with v-if conditions, it works too.

More info about dynamic components can be found here

来源：https://stackoverflow.com/questions/54350612/load-components-dynamically-based-on-choice-in-the-current-step-in-vue-form-wiza