Блог

 export default {
    components: {
        'def-input': TextField,
        'def-select': Select,
        'def-button': Button
    },
    props: {
        'title': String,
        'fields': Array,
        'btnAction': Object
    },
    data: function () {
        return {
            arrElem: []
        }
    },
    template: `
        <form @submit.prevent class="ui-form">
            <div class="uif-title">
                <h3>{{ title }}</h3>
            </div>
            <div class="uif-row" v-for="indx in fields.length" :id="'uifRow'   indx" :key="indx" v-html="arrElem[indx]"></div>
            <div class="uif-action">
                <def-button
                    :unique-id="btnAction.uniqueId"
                    :use-style="btnAction.useStyle"
                    :variant="btnAction.variant"
                    :action="btnAction.action"
                    :value="btnAction.value"
                    :icon="btnAction.icon" />
            </div>
        </form>
    `,
    beforeMount: function () {
        this.fields.forEach((fields) => {
            const rowFields = [];
            let elemPos, elemRow, elemType, elemProps;

            for (const field in fields) {
                elemPos = field.split("_")[0];
                elemRow = field.split("_")[1];
                elemType = field.split("_")[2];
                elemProps = fields[field];

                rowFields[elemPos] = this.returnComponent(elemType, elemProps);
            }

            this.arrElem[elemRow] = rowFields;
        });
    },
    methods: {
        returnComponent(type, props) {
            const componentByType = {
                input: `<def-input
                    label="${props.label}"
                    uniqueId="${props.name}"
                    class="${props.class}"
                    mask="${props.mask}"
                    placeholder="${props.placeholder}"
                    size="${props.size}"
                    maxlength="${props.maxlength}"
                    useStyle="${props.useStyle}"
                    attrs="${props.attrs}"></def-input>`,
                select: `<def-select
                    label="${props.label}"
                    uniqueId="${props.name}"
                    options="${props.options}"
                    useStyle="${props.useStyle}"
                    attrs="${props.attrs}"></def-select>`
            }

            return componentByType[type];
        }
    }
}
 

У меня есть вышеприведенный компонент, его формула с x числом «uif-строк», поля переменных-это объект со всеми полями, которые будет иметь эта формула.
Я пытаюсь заполнить «uif-строку» соответствующими полями, но все, что я получаю, это…

 <def-input label="Cotação" uniqueid="id_cotacao" class="undefined" mask="int" placeholder="undefined" size="undefined" maxlength="undefined" usestyle="undefined" attrs="undefined"></def-input>
 

и не текстовое поле компонента.
Все, что я хочу сделать, это динамически сгенерировать формулу с x числом или строками (divs) и x количеством полей ввода.
Есть ли способ сделать это?