Vuejs2 我想使用Vue.js和Vuetify创建动态字段

这是我的vuejs文件，我想创建动态字段，如文本框、复选框、单选按钮、下拉列表、文本区域等。我已经尝试过，但我已经获得了vue源代码

<template>
<v-container>
    <v-layout>            
        <v-flex xs12 sm12>
            <v-card>                    
                <v-card-title primary-title>
                    <v-layout>
                        <v-flex xs12 sm6 md3 v-for="(item, i) in field_output" :key="i">                                
                            {{item.template}}
                        </v-flex>
                    </v-layout>
                </v-card-title>
            </v-card>
        </v-flex>
    </v-layout>
</v-container>
</template>

{{item.template}}

这里我创建了字段数组，其中包含我需要的所有字段。通过创建表单（）函数，我可以创建表单字段

<script>
export default {
    data() {
        return {
            fields: [{
                    type: 'text',
                    text: 'CSP Address',
                    default_value: '',
                    meta_id: 'csp_address'
                },
                {
                    type: 'text',
                    text: 'CSP Name',
                    default_value: '',
                    meta_id: 'csp_name'
                },
                {
                    type: 'radio',
                    text: 'CSP Gender',
                    default_value_one: 'male',
                    default_value_two: 'female',
                    meta_id: 'csp_gender'
                },
                {
                    type: 'check_box',
                    text: 'CSP Agree',
                    default_value: false,
                    meta_id: 'csp_aggree'
                }
            ],
            field_output:null
        }
    },
    created: function(){
        this.create_forms()
    },
    methods:{
        create_forms: function(){
           var field_output = [];
            this.fields.forEach(function (item, key) {
                 var input_field;                    
                switch(item.type){
                    case 'text':
                        input_field = '<v-text-field type="text" v-model="input_value.'+item.meta_id+'" label="'+item.text+'" outline></v-text-field>';
                    break;
                    case 'radio':
                        input_field = '<v-radio-group v-model="input_value.'+item.meta_id+'"><v-radio :label="'+item.default_value_one+'" :value="'+item.default_value_one+'"></v-radio><v-radio :label="'+item.default_value_two+'" :value="'+item.default_value_two+'"></v-radio></v-radio-group>';
                    break;
                    case 'check_box': 
                        input_field = ' <v-checkbox :label="'+item.text+'" v-model="input_value.'+item.meta_id+'"></v-checkbox>';
                    break;
                    case 'select':
                    break;
                    case 'textarea':
                    break;
                 }
                field_output.push({id: key+1, template:input_field});
            })
            this.field_output = field_output;
            console.log(this.field_output);
        }
    }
}
</script>

导出默认值{
数据（）{
返回{
字段：[{
键入：“文本”，
文本：“CSP地址”，
默认值：“”，
meta_id:“csp_地址”
},
{
键入：“文本”，
文本：“CSP名称”，
默认值：“”，
meta_id:'csp_名称'
},
{
键入：“收音机”，
文本：“CSP性别”，
默认值为“男性”，
默认值为“女性”，
meta_id:“csp_性别”
},
{
键入：“复选框”，
文本：“CSP同意”，
默认值：false，
meta_id:'csp_aggree'
}
],
字段输出：空
}
},
已创建：函数（）{
这个。创建_表单（）
},
方法：{
创建表单：函数（）{
变量字段_输出=[]；
this.fields.forEach（函数（项、键）{
变量输入_字段；
开关（项目类型）{
案例“文本”：
输入_字段=“”；
打破
“无线电”案例：
输入_字段=“”；
打破
案例“复选框”：
输入_字段=“”；
打破
案例“选择”：
打破
案例“textarea”：
打破
}
field_output.push（{id:key+1，模板：input_field}）；
})
this.field\u output=field\u output；
console.log（此.field_输出）；
}
}
}

我的结果是：

---

我需要文本字段、单选按钮、复选框等，而不是vue代码。请帮助我

您现在正在打印一个vuejs不会识别为html的字符串

如这里的文档所示： 您可以使用v-html指令打印原始html：

---

我建议使用VueJS

并加载所需表单字段：

这是一个小的工作示例，您可以根据需要进行更改

模板：

{{JSON.stringify（values）}

将字段

数组
更改为：


导出默认值{
数据（）{
返回{
价值观：{
csp_地址：“默认值”，
csp_名称：“默认值”，
csp_性别：“男性”，
csp_aggree：正确
},
字段：[
{
键入：“v-text-field”，
文本：“CSP地址”，
meta_id:“csp_地址”
},
{
键入：“v-text-field”，
文本：“CSP名称”，
meta_id:'csp_名称'
},
{
键入：“v-无线电组”，
文本：“CSP性别”，
儿童：[
{
键入：“v-radio”，
值：'男性'，
正文：“男性”，
},
{
键入：“v-radio”，
值：'女性'，
正文：“女性”，
}
],
meta_id:“csp_性别”
},
{
键入：“v-checkbox”，
文本：“CSP同意”，
meta_id:'csp_aggree'
}
]
}
}
}
对不起，先生，我已经试过了，但什么也没发生。它显示我完全空白。你能分享你用v-html指令实现的代码吗？