Vue-Form-Wizard의 현재 단계 선택에 따라 동적으로 구성 요소 로드

Vue-Form-Wizard의 현재 단계 선택에 따라 동적으로 구성 요소 로드

현재 단계의 선택에 따라 동적으로 구성요소를 로드하려고 한다.예를 들어, 사용자는 첫 번째 단계에서 3가지 선택사항이 있으며, 만약 그가 하나를 선택한다면, 구성요소 원은 2단계의 형태로 로딩될 것이다.문제는 여기서 이런 일을 할 수 있느냐는 것이다.만약 그것이 그것을 어떻게 하는 지에 대해서라면?

다음 단계에서 v-model을 사용하여 선택 사항을 클릭하면 라디오 버튼의 값을 확인할 수 있다.v-if를 사용하여 선택되지 않은 구성 요소가 렌더링되지 않도록 한다.

이것을 확인해 보십시오.테스트해보지는 않았지만 이렇게 생겼어.

<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>

다음과 같은 구성 요소를 동적으로 로드할 수 있음:

(웹 팩 사용 시)

<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 - 템플릿에서 '구성 요소'를 사용하면 'currentComponent' 변수의 값으로 명명된 구성 요소가 동적으로 표시됨소품 등을 통과할 수 있다.

2 - 구성요소를 가져올 때 약속을 사용하면 구성요소를 사용할 때만 서버에서 로드할 수 있다.조건부 디스플레이를 위해 20개의 큰 구성요소를 가지고 있더라도, 런타임에 사용된 구성요소만 서버에서 로드될 것이다.

3 - v-if 조건의 구성 요소 하나와 두 개의 구성 요소를 사용할 수도 있으며, 이 구성 요소도 사용할 수 있다는 점에 유의하십시오.

동적 구성요소에 대한 자세한 내용은 여기를 참조하십시오.

참조URL: https://stackoverflow.com/questions/54350612/load-components-dynamically-based-on-choice-in-the-current-step-in-vue-form-wiza