使用 element-ui 动态添加表单输入

Question

我正在尝试通过单击添加字段的按钮和删除它们的按钮来动态添加字段，我希望两个字段出现在开头并且是必需的，并且可以选择添加更多并删除额外的那些。这样做的目的是为正在创建的问题添加多项选择问题的答案。

这是我目前的代码

表格

<div v-if="form.response_type_id === 2">
    <el-divider></el-divider>
    <div v-for="(option, index) in options" :key="index">
        <el-row>
            <el-col :span="22">
                <p class="el-form-item__label">Opciones</p>
            </el-col>
            <el-col :span="2">
                <div class="btn-link-plus action-button" @click="addOption(index)">
                    <i class="fas fa-plus" v-show="index == options.length - 1"></i>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="20">
                <el-form-item prop="option">
                    <el-input v-model="option.option"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="2">
                <div class="btn-link-delete action-button" @click="removeOption(index)">
                    <i class="fas fa-trash-alt"
                        v-show="index || (!index && options.length > 1)"></i>
                </div>
            </el-col>
        </el-row>
</div>

数据

options: [];

方法

addOption() {
    this.options.push({
        survey_question_id: this.form.id,
        option: ''
    });
},
removeOption(index) {
    this.options.splice(index, 1);
},

目前，什么都没有出现，<div v-for> 中的所有内容都没有出现。代码背后的逻辑是，当问题的响应类型设置为多项选择时，上面的代码将出现在表单中，以允许用户创建不同的选择，其中两个是必需的。理想情况下，我只想将删除按钮添加到添加的输入而不是所需的输入。

Answer 1

你的解释有点误导。我注意到的是，您至少需要两个答案。 如果我理解正确：

removeOption(index) {
    if(this.options.length<=2) {
        alert('')
    } else {
        this.options.splice(index, 1);
    }
},

默认选择两个选项：

data() {
    return {
        options: [{option1Obj}, {option2Obj}]
    }
}