I'm creating an application where input flexibility is of paramount. My application generates contents dynamically (input, textarea, buttons). this picture shows the bottom section separated from the top with a borderline was generated dynamically
What I want to do is, when I click the grey plus button, it should generate an additional director's name, and director's address fields for a PARTICULAR SECTION (separated by a grey line). Unfortunately, my application keeps adding (and removing) director's name, and director's address fields for all sections instead of the section where the grey button (or red button is clicked) see here. Can that be achieved in Vue.js PLEASE? I.m using the 'add_new_director_field()' function in my Vue.js code to add the aforementioned fields. Thanks in Advance good people. See my code below:
<script>
import NavBar from './VettingReportMenu.vue';
import BreadCrumb from './BCRPreviousDirectors.vue';
import SideLinkPreviousDirectors from './SideLinkPreviousDirectors.vue';
export default {
data() {
return{
header_1: "Previous Directors",
count: 0,
disabled: true,
checked: false,
isActive: true,
inputs: [{
director: "",
}],
sec: []
}
},
components:{
NavBar, BreadCrumb, SideLinkPreviousDirectors
},
setup(){
let myClass = "LeftLine";
let counts = 1;
return myClass, counts;
},
methods:{
add_new_director_field(){
this.inputs.push(this.inputs.length 1);
},
remove_director_field(index){
this.inputs.splice(index, 1)
},
add_new_section(){
this.count ;
this.isActive = false;
this.sec.push({
director: ''
});
},
remove_section(index){
this.count--;
if(this.count == 0)
this.isActive = true;
this.sec.splice(index, 1)
},
trythis: function() {
alert(this.counts);
},
}
}
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})<template>
<div class="row">
<div class="col-sm-12">
<NavBar />
<BreadCrumb />
<br />
</div>
</div>
<!-- This is the main div splitting the page into two (2) -->
<div class="row">
<div class = "col-sm-1"><!-- Left Space Section-->
</div>
<div class = "col-sm-8"><!-- Main Content Section -->
<h2 style="border-bottom: 1px solid #DDDDDD">{{header_1}}</h2>
<br />
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-sm-6">
<div class="chiller_cb form-check-inline align-items-center">
<input id="addDirectorsHistory" type="checkbox" name="prev_dir_checkbox" value="Add Previous Directors" v-model="checked">
<label for="addDirectorsHistory"><strong>Check this box to fill this part, or click 'Save and Continue' to skip.</strong></label>
<span></span>
</div>
</div>
<div class="col-sm-3">
</div>
</div>
<br />
<!-- Here starts the section containing the previous directors -->
<div v-if="checked"> <!-- Wrapper -->
<!-- Buttons for Adding and Removing Previous Director's Section -->
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-4">
<div class="form-group">
<div class="input-group">
<button @click.self="add_new_section()" class="btn shadow-sm btn-secondary btn-block rounded-2" id="add_pds" data-toggle="tooltip" data-placement="top" title="Remove Address Field">
<i class="fas fa-plus-square" style="horizontal-align: left;"></i>
Previous Director's Section
</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<div class="input-group">
<button :disabled="isActive" @click="remove_section(count)" class="btn shadow-sm btn-danger btn-block rounded-2" id="remove_pds" data-toggle="tooltip" data-placement="top" title="Remove Address Field">
<i class="fas fa-minus-square" style="horizontal-align: left;"></i>
Previous Director's Section
</button>
</div>
</div>
</div>
<div class="col-sm-2">
</div>
</div>
<!-- Buttons for Adding and Removing Previous Director's Section -->
<br />
<div v-for="(secs,k) in sec" :key="k" style="border-bottom:1px solid #b7b7b7">
<br />
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12 align-middle">
<strong>Heading for Previous Directors' Entry:</strong><b class="text-danger">*</b>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-heading" style="color: #8FBC8F"></i>
</span>
</div>
<input placeholder="Heading for Previous Directors Entry" class="form-control" :name="'prev_dir_heading_' k" required >
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-sm-12 align-middle">
<strong>Appointed By Resolution Dated:</strong><b class="text-danger">*</b>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="far fa-calendar-alt" style="color: #8FBC8F"></i>
</span>
</div>
<input type="date" class="form-control" placeholder="e.g. 2018" name="resolution_date" required >
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-sm-12 align-middle">
<strong>Presented for Filing Dated:</strong><b class="text-danger">*</b>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="far fa-calendar-alt" style="color: #8FBC8F"></i>
</span>
</div>
<input type="date" class="form-control" name="filing_date" required >
</div>
</div>
</div>
</div>
</div>
</div>
<!-- The listing of Directors -->
<div :id="'c' k d" v-for="(input,d) in inputs" :key="k d">
<div class="row" >
<div class="col-sm-1">
<strong>{{d 1}}.</strong>
</div>
<div class="col-sm-11">
<div class="row">
<div class="col-sm-12 align-middle">
<strong>Director's Name:</strong><b class="text-danger">*</b>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-user-tie" style="color: #8FBC8F"></i>
</span>
</div>
<input v-model="input[d]" class="form-control" placeholder="e.g. Hassan Dele Ekene" :name="'current_director_' k '_' d" required >
</div>
</div>
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="input-group">
<button :v-model="'remove_btn' k '' d" @click="remove_director_field(k d)" type="button" v-show="d || ( !d && inputs.length > 1)" class="btn shadow-sm btn-danger btn-block rounded-2" data-toggle="tooltip" data-placement="top" title="Remove Address Field">
<i class="fas fa-minus-square" style="horizontal-align: left;"></i>
</button>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="input-group">
<button :id="'add_btn' k '' d" :v-model="'add_btn' k '' d" v-show="d == inputs.length-1" @click="add_new_director_field()" type="button" class="btn shadow-sm btn-secondary btn-block rounded-2" data-toggle="tooltip" data-placement="top" title="Add New Address Field">
<i class="fas fa-plus-square" style="horizontal-align: left;"></i>
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 align-middle">
<strong>Director's Address:</strong><b class="text-danger">*</b>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-map-marked-alt" style="color: #8FBC8F; margin-top: -30px"></i>
</span>
</div>
<textarea class="form-control _textarea" :name="'dir_addr_' k '_' d"
maxlength="1000" placeholder="Director's Address" rows="2" required></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
</div>
</div>
<!-- End of listing -->
<!-- Here ends the section containing the current directors -->
<br />
<div class="row">
<div class="col-sm-3">
<div class="col-sm-12">
<div class="form-group">
<div class="input-group">
<button type="submit" class="btn shadow-sm btn-success btn-block rounded-0" id="btn_submit">
<i class="fas fa-angle-double-left" style="horizontal-align: left;"></i>
Back to Share Capital
</button>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
</div>
<div class="col-sm-3">
<div class="col-sm-12">
<div class="form-group">
<div class="input-group">
<button type="submit" class="btn shadow-sm btn-success btn-block rounded-0" id="btn_submit">
<i class="far fa-save"></i>
Save and Continue
<i class="fas fa-angle-double-right" style="horizontal-align: right;"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "col-sm-3" ><!-- SideLink Section-->
<div class="row myClass">
<SideLinkPreviousDirectors />
</div>
</div>
</div>
<br />
<br />
</template>CodePudding user response：
You have no pointer in your add_new_director_field method in what section inputs should be added. It's very hard to understand from your code whats happening at all. I'd recommend to start from designing a data structure at first, then go to markup. Very quick and simplified draft how can it be:
const inputsGroup = [
{
type: 'text',
value: 'Name',
},
{
type: 'text',
value: 'Address',
},
]
data() {
return {
sections: [
{
inputs: [inputsGroup]
},
]
}
}
...
addSection() {
this.sections.push({ inputs: defaultInputs })
}
removeSection(index) {
this.sections.splice(index, 1)
}
addInputs(sectionIndex) {
this.sections[sectionIndex].inputs.push(inputsGroup)
}
deleteInputs(index, sectionIndex) {
this.sections[sectionIndex].inputs.splice(index, 1)
}
<template>
<button
@click="addSection"
>
Add section
</button>
<div v-for=(section, sectionIndex) in sections>
<div v-for="(inputGroup, inputGroupIndex) in section.inputs">
<input
v-for="input in inputGroup"
:value="input.value"
:type="input.type"
>
<button
@click="deleteInputs(inputGroupIndex, sectionIndex)"
>
Delete inputs
</button>
</div>
<button
@click="addInputs(sectionIndex)"
>
Add inputs
</button>
<button
@click="deleteSection(sectionIndex)"
>
Delete section
</button>
</div>
</template>