Question

我试图通过输入添加选项，这些输入希望能够单击一个按钮并添加另一个按钮。我正在做的是创建一个问题，当我选择响应类型时，会打开一个新部分，可以在其中创建该问题的选项，我认为至少需要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>

我不知道该如何创建它，我们将不胜感激。我可以根据需要上传任何其他我需要的代码。

Answer 1

用于动态导入输入字段的工作代码

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

如何将输入字段动态添加到表单

1 个答案: