Динамическое добавление входных данных формы с помощью element-ui - PullRequest
Новая
       2

Динамическое добавление входных данных формы с помощью element-ui

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

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

Пока это мой код

Форма 

<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> не появляется. Логика, лежащая в основе кода, заключается в том, что когда тип ответа на вопрос задан как множественный выбор, вышеуказанный код появится внутри формы, чтобы позволить пользователю затем создать различные варианты, причем два из них требуются. В идеале я хотел бы добавить кнопку удаления только к тем входам, которые добавлены, а не к тем, которые требуются.

1 Ответ

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

Ваше объяснение немного вводит в заблуждение. Что я заметил, так это то, что вы хотите по крайней мере два ответа. Если я правильно понял : 

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

Чтобы выбрать два варианта по умолчанию: 

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