Я хочу создать динамические поля, используя Vue.js и Vuetify

Question

Вот мой файл 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>

Здесь у меня есть массив fields , который содержит все поля, которые мне нужны. Через функцию 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>

Мой результат :

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

Answer 1

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

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

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