I want to create dynamic fields using Vue.js and Vuetify - vuejs2

Question

Here is my vuejs file, I want to create dynamic fields like text box, check box, radio button, drop down, text area etc. I have tried but I have got vue source code.
<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>
Here I have create fields array which contains the all fields which I need. Through create_forms() function I have create forms fields.
<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>
My result is :
I need text field, radio button, check box etc. Not vue code. Please help me

Answer 1

I would suggest using VueJS <component/> and load required form field:
This is a small working example, you can change it to your needs.
Template:
<template>
<v-flex>
<component :is="item.type" :label="item.text" v-for="(item, i) in fields" :key="i" v-model="values[item.meta_id]">
<component v-if="item.children && item.children.length > 0" :is="children.type" :value="children.value" :label="children.text" v-for="(children, j) in item.children" :key="j"/>
</component>
{{ JSON.stringify(values) }}
</v-flex>
</template>
Change your fields array to:
<script>
export default {
data(){
return {
values: {
csp_address: 'default value',
csp_name: 'default value',
csp_gender: 'male',
csp_aggree: true
},
fields: [
{
type: 'v-text-field',
text: 'CSP Address',
meta_id: 'csp_address'
},
{
type: 'v-text-field',
text: 'CSP Name',
meta_id: 'csp_name'
},
{
type: 'v-radio-group',
text: 'CSP Gender',
children: [
{
type: 'v-radio',
value: 'male',
text: 'Male',
},
{
type: 'v-radio',
value: 'female',
text: 'Female',
}
],
meta_id: 'csp_gender'
},
{
type: 'v-checkbox',
text: 'CSP Agree',
meta_id: 'csp_aggree'
}
]
}
}
}
</script>

Answer 2

What you are doing right now is printing out a string which vuejs won't recogize as html.
As shown in the docs here: https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML
you can use the v-html directive to print out raw html:
<div v-html="{{ item.template }}"></div>