I'm trying to add fields to an element-ui form, and make 2 fields minimum required and be able to add more and delete those extra that are added. The following code is for the section of the form where I need to add the fields only, the complete form is larger and has more code.
This is the form code
<el-form>
<el-row>
<el-col :span="22">
<h4>Options</h4>
</el-col>
<el-col :span="2">
<div class="btn-link-plus action-button">
<i class="fas fa-plus"></i>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="22">
<el-form-item prop="option">
<el-input v-model="options"></el-input>
</el-form-item>
</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-row>
</el-form>
What I have currently is the form that appears where I want to add the fields, those two fields that appear initially should be required. The plus button should add a new field along with a delete button beside it. Like follows
<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">
<i class="fas fa-trash-alt"></i>
</div>
</el-col>
</el-row>
How it works is that I'm creating a question and when the response type is selected as multiple choice then this section of the form will appear and the person has to add which are the options available for the answer, with two options being required always and the ability to add more and delete the ones added.
Currently when I write in any of the field inputs it writes in both, this array with the options will be saved into a different table from the rest of the form. Any help would be appreciated.