динамически загружать компоненты в зависимости от выбора на текущем шаге в Vue-Form-Wizard - PullRequest
Новая
       7

динамически загружать компоненты в зависимости от выбора на текущем шаге в Vue-Form-Wizard

0 голосов
/ 24 января 2019

Я пытаюсь загружать компоненты динамически в зависимости от выбора на текущем шаге.Например, у пользователя есть 3 варианта на первом шаге, и если он выберет вариант 1, компонент Один будет загружен на 2-м шаге и так далее.Вопрос в том, можно ли сделать что-то подобное?если это как это сделать?

Ответы [ 2 ]

0 голосов
/ 24 января 2019

Вы можете динамически загружать компоненты следующим образом:

(при условии, что вы используете веб-пакет) 

<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, это тоже работает.

Более подробную информацию о динамических компонентах можно найти здесь

0 голосов
/ 24 января 2019

Вам просто нужно проверить значение переключателя, как только вы щелкнете варианты, используя v-модель на следующем шаге.Он использует 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>
...