Adding form inputs dynamically with element-ui

Question

I'm trying to add fields dynamically by clicking a button to add them and a button for removing them, I want two fields to appear at the beginning and to be required and there is the option to add more and remove the extra ones. The purpose of this is for adding multiple choice question answers to a question that is being created.

This is my code so far

The form

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

Data

options: [];

Methods

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

Currently, nothing shows up, everything inside the <div v-for> does not appear. The logic behind the code is that when the response type of the question is set as multiple choice the above code will appear inside the form to allow the user to then create the different choices, two of them being required. Ideally I would like to add a delete button only to the inputs that are added and not the ones that are required.

Mohammad Abedi · Accepted Answer · 2019-10-11 20:39:42Z

1

Your explanation is a little misleading. What I have noticed is that you want at least two answers. If I understood correctly:

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

To select two options by default:

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

edited Oct 11, 2019 at 20:39

answered Oct 9, 2019 at 20:31

Mohammad Abedi

363 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nancy Over a year ago

is there a way to start with 2 options from the start too?

Mohammad Abedi Over a year ago

@Nancy answer eddited

Collectives™ on Stack Overflow

Adding form inputs dynamically with element-ui

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related