根据 Vue-Form-Wizard 中当前步骤中的选择动态加载组件 [英] load components dynamically based on choice in the current step in Vue-Form-Wizard
问题描述
我正在尝试根据当前步骤中的选择动态加载组件.例如，用户在第一步有 3 个选择，如果他选择了一个，则组件 One 将在第二步加载，依此类推.问题是这里有可能做这样的事情吗?如果是怎么做?
您只需要在下一步中使用 v-model 单击选项后检查单选按钮的值.它使用 v-if，因此未选中的组件将不会呈现.
检查这个.我还没有测试过，但看起来像这样.
<div><表单向导@on-complete="onComplete"><template slot="step" slot-scope="props"><向导步骤:tab="props.tab":transition="props.transition":key="props.tab.title":index="props.index"></wizard-step></模板><tab-content title="Step1" :before-change="checkStep1">一个 <input type="radio" id="one" v-model="selectedOption" :value="1" >两个 <input type="radio" id="two" v-model="selectedOption" :value="2" >三 </tab-content><tab-content title="Step2" ><component1 v-if="selectedOption === 1"/><component2 v-if="selectedOption === 2"/><component3 v-if="selectedOption === 3"/></tab-content></表单向导></模板><脚本>从'vue'导入Vue从 'vue-form-wizard' 导入 VueFormWizard从 '@/components/component1' 导入 component1从 '@/components/component2' 导入 component2从 '@/components/component3' 导入 component3Vue.use(VueFormWizard)导出默认{name: '我的组件',成分: {组件1，组件2，组件 3},数据 () {返回 {选择的选项:1}},方法: {检查步骤1(){//在此处添加步骤1的验证并返回true或false}}}
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?
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>
这篇关于根据 Vue-Form-Wizard 中当前步骤中的选择动态加载组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
