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

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

SergkeiM · Accepted Answer · 2019-10-30 12:39:17Z

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>

tony19 · Accepted Answer · 2022-07-15 02:17:58Z

0

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>

edited Jul 15, 2022 at 2:17

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 31, 2018 at 11:35

frank Walleway

1361 gold badge1 silver badge9 bronze badges

2 Comments

Manabroy72 Over a year ago

Sorry sir I have tried it but nothing happens. It shows me fully blank.

frank Walleway Over a year ago

Can you share the code that you have implemented with the v-html directive?

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related