I've encountered a challenge while working on my project.
Here is the form I'm currently using:
https://i.sstatic.net/LyynY.png
Upon clicking the 'New Deal Section' button, a new section like this one is created:
https://i.sstatic.net/NPecF.png
My goal is to add multiple text boxes in each section when the 'New Item' button is pressed. I tried nesting a second v-for loop within the container generated by the 'New Deal Button,' but I couldn't make it work.
As someone who is new to JS and VueJS framework, I would greatly appreciate any assistance provided. Here is the code I have written so far:
<!--Start of content-->
<div class="container">
<button class="btn btn-success mt-5 mb-5" @click="addNewSection">
New Deal Section
</button>
<div class="card mb-3" v-for="(section, index) in sections">
<div class="card-body">
<button class="btn btn-success mt-5 mb-5" @click="addNewItem">
New Item
</button>
<span class="float-right" style="cursor:pointer">
X
</span>
<h4 class="card-title">Deal section {{ index + 1}}</h4>
<div class="employee-form" v-for="(addition, index) in additionals">
<input type="text" class="form-control mb-2" placeholder="Item" v-model="addition.item">
</div>
<div class="employee-form">
<input type="text" class="form-control mb-2" placeholder="Item" v-model="section.item">
</div>
</div>
</div>
</div>
<script>
var app = new Vue({
el: '.container',
data: {
sections: [
{
item: '',
}
]
},
methods: {
addNewSection () {
this.sections.push({
item: ''
})
},
addNewItem () {
this.additionals.push({
item: ''
})
}
}
})
</script>