Как динамически добавлять поля ввода в форму - PullRequest
Новая
       9

Как динамически добавлять поля ввода в форму

1 голос
/ 08 октября 2019

Я пытаюсь добавить параметры, хотя вводы, которые я хочу иметь возможность нажать кнопку и добавить еще один. Я создаю вопрос, и когда я выбираю тип ответа, открывается новый раздел, в котором можно создать варианты для вопроса, и я думаю, что нужно как минимум 2 варианта, потому что это неНе имеет смысла иметь только один вариант.

Это код, который у меня есть сейчас 

<div v-if="form.response_type_id === 2">
    <el-divider></el-divider>
    <el-row>
        <el-col :span="22">
            <h4>Options</h4>
        </el-col>
        <el-col :span="2">
            <div class="btn-link-plus action-button" @click="addOption">
                <i class="fas fa-plus"></i>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="22">
            <el-form-item>
                <el-input v-model="options"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="2">
            <div class="btn-link-delete action-button" @click="">
                <i class="fas fa-trash-alt"></i>
            </div>
        </el-col>
    </el-row>
</div>

Я заблудился, как его создать, любая помощь приветствуется. Любой другой код, который у меня есть, может быть загружен при необходимости.

1 Ответ

0 голосов
/ 08 октября 2019

Рабочий код для динамического импорта полей ввода 

<html>

<head>
    <meta charset="UTF-8" />
    <title>Example Dynamic Form</title>
    <script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
    <style>
        .fileContainer {
            overflow: hidden;
            position: relative;
        }

        .fileContainer [type=file] {
            cursor: inherit;
            display: block;
            font-size: 999px;
            filter: alpha(opacity=0);
            min-height: 21px;
            min-width: 100%;
            opacity: 0;
            position: absolute;
            right: 0;
            text-align: right;
            top: 0;
        }

        .fileContainer {
            background: #E3E3E3;
            float: left;
            padding: .5em;
            height: 21px;
        }

        .fileContainer [type=file] {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="app">
        <table class="table">
            <thead>
                <tr>
                    <td><strong>Title</strong></td>
                    <td><strong>Description</strong></td>
                    <td><strong>File</strong></td>
                    <td></td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(row, index) in rows">

                    <td><input type="text" v-model="row.title"></td>
                    <td><input type="text" v-model="row.description"></td>
                    <td>
                        <label class="fileContainer">
                            {{row.file.name}}
                            <input type="file" @change="setFilename($event, row)" :id="index">
                        </label>
                    </td>
                    <td>
                        <a v-on:click="removeElement(index);" style="cursor: pointer">Remove</a>
                    </td>


                </tr>
            </tbody>
        </table>
        <div>
            <button class="button btn-primary" @click="addRow">Add row</button>
        </div>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                rows: []
            },
            methods: {
                addRow: function() {
                    var elem = document.createElement('tr');
                    this.rows.push({
                        title: "",
                        description: "",
                        file: {
                            name: 'Choose File'
                        }
                    });
                },
                removeElement: function(index) {
                    this.rows.splice(index, 1);
                },
                setFilename: function(event, row) {
                    var file = event.target.files[0];
                    row.file = file
                }
            }
        });
    </script>
</body>

</html>
...