I'm trying to achieve the following, but have hit a road block.

I have the following form:

When I click the 'New Deal Section' button, I create a new section which looks like the following:

What I want to do however is be able to add multiple text boxes in each section when the 'New Item' button is pressed. I've tried nesting a second v-for loop within the container that is created when the 'New Deal Button' is pressed but have failed to get this working.

I'm very new to working with any kind of JS let alone the VueJS framework, so any assistance would be greatly appreciated. Here is my code 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>

I'm trying to achieve the following, but have hit a road block.

I have the following form:

When I click the 'New Deal Section' button, I create a new section which looks like the following:

What I want to do however is be able to add multiple text boxes in each section when the 'New Item' button is pressed. I've tried nesting a second v-for loop within the container that is created when the 'New Deal Button' is pressed but have failed to get this working.

I'm very new to working with any kind of JS let alone the VueJS framework, so any assistance would be greatly appreciated. Here is my code 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>

• javascript
• vue.js

1 Answer 1

You should add the additionals array inside the sections array, like this:

<div id="app">
    <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">
            <hr>
            <div class="card-body">
                <button class="btn btn-success mt-5 mb-5" @click="addNewItem(index)"> <!-- passing the index -->
                    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 section.additionals"> <!-- additionals of the section -->
                    <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>
</div>

<script>
    var app = new Vue({
        el: '.container',
        data: {
            sections: [
                {
                    item: '',
                    additionals: [] // <-
                }
            ]

        },
        methods: {
            addNewSection() {
                this.sections.push({
                    item: '',
                    additionals: [] // <-
                })
            },
            addNewItem(id) {
                // passing the id of the section
                this.sections[id].additionals.push({
                    item: ''
                })
            }
        }
    })
</script>

JSFiddle: https://jsfiddle/Wuzix/qs6t9L7x/