javascript - VueJS adding form components dynamically in a nested v-for loop? - Stack Overflow

admin管理员组

文章数量:1415100

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

Share Improve this question Follow asked Sep 30, 2018 at 21:38 JamMan9JamMan9 77633 gold badges1010 silver badges2525 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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/

本文标签： javascriptVueJS adding form components dynamically in a nested vfor loopStack Overflow