Vue.js 是否可以使用for-loop-inside函数生成vue组件？
可以使用for循环生成vue组件。我试图生成并能够获得，但它被新组件动态覆盖它的覆盖组件一个模式也和组件第二个模式最终生成 generateNewForm.vueVue.js 是否可以使用for-loop-inside函数生成vue组件？,vue.js,Vue.js,可以使用for循环生成vue组件。我试图生成并能够获得，但它被新组件动态覆盖它的覆盖组件一个模式也和组件第二个模式最终生成 generateNewForm.vue <template> <div class="app animated fadeIn"> <loading :active.sync="this.$store.state.isLoading" :can-cancel="true"
<template>
<div class="app animated fadeIn">
<loading :active.sync="this.$store.state.isLoading"
:can-cancel="true"
:is-full-page="this.$store.state.fullPage"></loading>
<b-row>
<b-col cols="12" xl="12">
<transition name="slide">
<b-card>
<div slot="header">
<b-button variant="primary" @click="goBack"><i class="icon-arrow-left icons font-1xl"></i>Back</b-button>
</div>
<formcomponent :tree="this.$store.state.formData" />
</b-card>
</transition>
</b-col>
</b-row>
</div>
</template>
<script>
import {store} from '@/components/store'
import formcomponent from '@/components/formcomponent';
import Vue from 'vue'
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';
import {FormWizard, TabContent} from 'vue-form-wizard'
import 'vue-form-wizard/dist/vue-form-wizard.min.css'
import VueFormGenerator from "vue-form-generator";
/*import VeeValidate from 'vee-validate';*/
Vue.use(VueFormGenerator);
Vue.use(Loading);
export default {
name: 'tables',
store: store,
data: () => {
return {
finalModel: {},
activeTabIndex: 0,
model: {},
count: 0,
}
},
components: {
'loading': Loading,
FormWizard,
TabContent,
formcomponent: formcomponent
},
created() {
},
beforeMount() {
this.$store.dispatch('loadFormData', this.$route.params.id);
},
methods: {
onComplete: function(){
alert('Yay. Done!');
},
goBack() {
this.$router.go(-1)
}
}
}
</script>
返回
从“@/components/store”导入{store}
从“@/components/formcomponent”导入formcomponent；
从“Vue”导入Vue
从“vue加载覆盖”导入加载；
导入“vue加载覆盖/dist/vue加载.css”；
从“vue表单向导”导入{FormWizard，TabContent}
导入“vue表单向导/dist/vue表单向导.min.css”
从“vue表单生成器”导入VueFormGenerator；
/*从“vee validate”导入vee validate*/
Vue.use（VueFormGenerator）；
Vue.使用（加载）；
导出默认值{
名称：'表'，
店:店,，
数据：（）=>{
返回{
最终模型：{}，
activeTabIndex:0，
型号：{}，
计数：0，
}
},
组成部分：{
“加载”：加载，
FormWizard，
塔布内特，
formcomponent:formcomponent
},
创建（）{
},
beforeMount（）{
this.$store.dispatch（'loadFormData'，this.$route.params.id）；
},
方法：{
onComplete:function（）{
警惕（“耶，完成！”）；
},
戈巴克（）{
此。$router.go（-1）
}
}
}
<template>
<div>
<form-wizard @on-complete="onComplete"
@on-change="handleChange"
validate-on-back
ref="wizard"
:start-index.sync="activeTabIndex"
shape="circle" color="#20a0ff" error-color="#ff4949" v-if="html != 0">
<tab-content v-for="tab in tabs"
v-if="!tab.hide"
:key="tab.title"
:title="tab.title"
:icon="tab.icon">
<component :is="tab.component"></component>
</tab-content>
</form-wizard>
</div>
</template>
<script>
import Vue from 'vue'
import {FormWizard, TabContent} from 'vue-form-wizard'
import 'vue-form-wizard/dist/vue-form-wizard.min.css'
import VueFormGenerator from "vue-form-generator";
//console.log(Vue.options);
Vue.use(VueFormGenerator);
export default {
components: {
FormWizard,
TabContent,
},
data() {
return {
loadingWizard: false,
error: null,
count: 0,
dash: '-',
firstTime: 0,
model: {},
html: '',
index: '',
activeTabIndex: 0,
tabs: [{title: 'Personal details', icon: 'ti-user', component: 'firstTabSchema'},
{title: 'Is Logged In?', icon: 'ti-settings', component: 'secondTabSchema', hide: false},
],
formOptions: {
validationErrorClass: "has-error",
validationSuccessClass: "has-success",
validateAfterLoad: true,
validateAfterChanged: true,
},
}
},
created() {
this.html = this.tree;
this.index = this.ind;
},
props: ['tree', 'ind'],
methods: {
onComplete: function () {
alert('Yay. Done!');
},
setLoading(value) {
this.loadingWizard = value
},
handleChange(prevIndex, nextIndex) {
console.log(`Changing from ${prevIndex} to ${nextIndex}`)
},
setError(error) {
this.error = error
},
validateFunction: function () {
return new Promise((resolve, reject) => {
console.log(this.$refs.firstTabSchema);
setTimeout(() => {
if (this.count % 2 === 0) {
reject('Some custom error')
} else {
resolve(true)
}
this.count++
}, 100)
})
},
validate() {
return true
},
buildTree(tree, rep = 1) {
var html = '';
var app = this;
var dash = "--";
app.html = tree;
var test = this.formOptions;
for (var key in app.html) {
var isComponentExists = key in Vue.options.components
if(!isComponentExists) {
Vue.component(key, {
template: `<div :class="key"><vue-form-generator :model="model"
:schema="schema"
:options="formOptions"
ref="key"></vue-form-generator>{{ key }}</div>`,
mounted() {
this.schema = app.html[key]
this.key = key
},
data: function () {
return {
schema: app.html[key],
key: '',
formOptions: this.formOptions,
model: this.model,
}
},
}
)
//console.log(Vue.$options);
this.$emit('init')
}
}
}
},
watch: {
tree: {
handler() {
this.html = '';
this.buildTree(this.tree)
},
deep: true
}
}
}
</script>
从“Vue”导入Vue
从“vue表单向导”导入{FormWizard，TabContent}
导入“vue表单向导/dist/vue表单向导.min.css”
从“vue表单生成器”导入VueFormGenerator；
//console.log（Vue.options）；
Vue.use（VueFormGenerator）；
导出默认值{
组成部分：{
FormWizard，
塔布内特，
},
数据（）{
返回{
加载向导：false，
错误：null，
计数：0，
破折号：'-'，
第一次：0，
型号：{}，
html:“”，
索引：“”，
activeTabIndex:0，
选项卡：[{title:'Personal details'，icon:'ti user'，component:'firstTabSchema'}，
{title:'Is loggin？'，图标：'ti settings'，组件：'secondTabSchema'，hide:false}，
],
表格选项：{
validationErrorClass:“有错误”，
validationSuccessClass:“已成功”，
validateAfterLoad:true，
validateAfterChanged:true，
},
}
},
创建（）{
this.html=this.tree；
this.index=this.ind；
},
道具：['tree'，'ind']，
方法：{
onComplete:函数（）{
警惕（“耶，完成！”）；
},
设置加载（值）{
this.loadingWizard=值
},
handleChange（上一个索引，下一个索引）{
log（`Changing from${prevIndex}to${nextIndex}`）
},
设置错误（错误）{
this.error=错误
},
validateFunction:函数（）{
返回新承诺（（解决、拒绝）=>{
log（this.$refs.firstTabSchema）；
设置超时（（）=>{
如果（this.count%2==0）{
拒绝（'某些自定义错误'）
}否则{
解析（真）
}
这个，伯爵++
}, 100)
})
},
验证（）{
返回真值
},
构建树（树，rep=1）{
var html=''；
var-app=这个；
var dash=“--”；
app.html=树；
var test=this.formOptions；
for（app.html中的var键）{
var isComponentExists=输入Vue.options.components
如果（！isComponentExists）{
Vue.组件（键{
模板：`{key}}}`，
安装的（）{
this.schema=app.html[key]
this.key=key
},
数据：函数（）{
返回{
模式：app.html[key]，
键：“”，
formOptions:this.formOptions，
模特儿：这个模特儿，
}
},
}
)
//console.log（Vue.$options）；
此.$emit（'init'））
}
}
}
},
观察：{
树：{
handler（）{
this.html=''；
this.buildTree（this.tree）
},
深：是的
}
}
}
app.htmlkeytabs: [{title: 'Personal details', icon: 'ti-user', component: 'firstTabSchema'},
{title: 'Is Logged In?', icon: 'ti-settings', component: 'secondTabSchema', hide: false},
],
<template>
<div class="app animated fadeIn">
<loading :active.sync="this.$store.state.isLoading"
:can-cancel="true"
:is-full-page="this.$store.state.fullPage"></loading>
<b-row>
<b-col cols="12" xl="12">
<transition name="slide">
<b-card>
<div slot="header">
<b-button variant="primary" @click="goBack"><i class="icon-arrow-left icons font-1xl"></i>Back</b-button>
</div>
<formcomponent :tree="this.$store.state.formData" />
</b-card>
</transition>
</b-col>
</b-row>
</div>
</template>
<script>
import {store} from '@/components/store'
import formcomponent from '@/components/formcomponent';
import Vue from 'vue'
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';
import {FormWizard, TabContent} from 'vue-form-wizard'
import 'vue-form-wizard/dist/vue-form-wizard.min.css'
import VueFormGenerator from "vue-form-generator";
/*import VeeValidate from 'vee-validate';*/
Vue.use(VueFormGenerator);
Vue.use(Loading);
export default {
name: 'tables',
store: store,
data: () => {
return {
finalModel: {},
activeTabIndex: 0,
model: {},
count: 0,
}
},
components: {
'loading': Loading,
FormWizard,
TabContent,
formcomponent: formcomponent
},
created() {
},
beforeMount() {
this.$store.dispatch('loadFormData', this.$route.params.id);
},
methods: {
onComplete: function(){
alert('Yay. Done!');
},
goBack() {
this.$router.go(-1)
}
}
}
</script>
<template>
<div>
<form-wizard @on-complete="onComplete"
@on-change="handleChange"
validate-on-back
ref="wizard"
:start-index.sync="activeTabIndex"
shape="circle" color="#20a0ff" error-color="#ff4949" v-if="html != 0">
<tab-content v-for="tab in tabs"
v-if="!tab.hide"
:key="tab.title"
:title="tab.title"
:icon="tab.icon">
<component :is="tab.component"></component>
</tab-content>
</form-wizard>
</div>
</template>
<script>
import Vue from 'vue'
import {FormWizard, TabContent} from 'vue-form-wizard'
import 'vue-form-wizard/dist/vue-form-wizard.min.css'
import VueFormGenerator from "vue-form-generator";
//console.log(Vue.options);
Vue.use(VueFormGenerator);
export default {
components: {
FormWizard,
TabContent,
},
data() {
return {
loadingWizard: false,
error: null,
count: 0,
dash: '-',
firstTime: 0,
model: {},
html: '',
index: '',
activeTabIndex: 0,
tabs: [{title: 'Personal details', icon: 'ti-user', component: 'firstTabSchema'},
{title: 'Is Logged In?', icon: 'ti-settings', component: 'secondTabSchema', hide: false},
],
formOptions: {
validationErrorClass: "has-error",
validationSuccessClass: "has-success",
validateAfterLoad: true,
validateAfterChanged: true,
},
}
},
created() {
this.html = this.tree;
this.index = this.ind;
},
props: ['tree', 'ind'],
methods: {
onComplete: function () {
alert('Yay. Done!');
},
setLoading(value) {
this.loadingWizard = value
},
handleChange(prevIndex, nextIndex) {
console.log(`Changing from ${prevIndex} to ${nextIndex}`)
},
setError(error) {
this.error = error
},
validateFunction: function () {
return new Promise((resolve, reject) => {
console.log(this.$refs.firstTabSchema);
setTimeout(() => {
if (this.count % 2 === 0) {
reject('Some custom error')
} else {
resolve(true)
}
this.count++
}, 100)
})
},
validate() {
return true
},
buildTree(tree, rep = 1) {
var html = '';
var app = this;
var dash = "--";
app.html = tree;
var test = this.formOptions;
for (var key in app.html) {
var isComponentExists = key in Vue.options.components
if(!isComponentExists) {
Vue.component(key, {
template: `<div :class="key"><vue-form-generator :model="model"
:schema="schema"
:options="formOptions"
ref="key"></vue-form-generator>{{ key }}</div>`,
mounted() {
this.schema = app.html[key]
this.key = key
},
data: function () {
return {
schema: app.html[key],
key: '',
formOptions: this.formOptions,
model: this.model,
}
},
}
)
//console.log(Vue.$options);
this.$emit('init')
}
}
}
},
watch: {
tree: {
handler() {
this.html = '';
this.buildTree(this.tree)
},
deep: true
}
}
}
</script>
Vue.component('my-custom-form', {
props: ['key', 'schema', 'formOptions', 'model'],
template: `
<div>
<vue-form-generator
:model="model"
:schema="schema"
:options="formOptions"
:ref="key"
></vue-form-generator>{{ key }}
</div>`,
})
<my-custom-form
v-for="(key, value) in app.html"
:key="key"
:schema="value"
:formOptions="formOptions"
:model="model"
/>
<div id="app">
<div>
<form-wizard @on-complete="onComplete">
<tab-content v-for="tab in tabs"
v-if="!tab.hide"
:key="tab.title"
:title="tab.title"
:icon="tab.icon">
<component :is="tab.component"></component>
</tab-content>
</form-wizard>
</div>
</div>
<div id="app">
<div>
<form-wizard @on-complete="onComplete">
<tab-content v-for="(tab, tabindex) in tabs"
v-if="!tab.hide"
:key="tab.title"
:title="tab.title"
:icon="tab.icon">
<my-custom-form v-if="tabindex == 1" :key="'the first key'" :schema="app.html['the first key']"/>
<my-custom-form v-else-if="tabindex == 2" :key="'the second key'" :schema="app.html['the second key']"/>
</tab-content>
</form-wizard>
</div>
</div>