Я хочу создавать динамические поля с помощью 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>

Здесь я создал массив поля, который содержит все поля, которые мне нужны. С помощью функции create_forms () я создаю поля форм.

<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>

Мой результат: enter image description here

Мне нужно текстовое поле, переключатель, флажок и т. д. Не код vue. Помогите, пожалуйста

0
0
3 132
2

Ответы 2

То, что вы делаете прямо сейчас, - это вывод строки, которую vuejs не распознает как html.

Как показано в документации здесь: https://vuejs.org/v2/guide/syntax.html#Raw-HTML вы можете использовать директиву v-html для распечатки необработанного html:

<div v-html="{{ item.template }}"></div>

Извините, сэр, я пробовал, но ничего не вышло. Он показывает мне полностью пустой.

Manabroy72 31.10.2018 12:45

Можете ли вы поделиться кодом, который вы реализовали с помощью директивы v-html?

frank Walleway 31.10.2018 14:17

Я бы предложил использовать VueJS <component/> и загрузить необходимое поле формы:

Это небольшой рабочий пример, вы можете изменить его под свои нужды.

Шаблон:

<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>

Измените свои поля array на:

<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>

Другие вопросы по теме