代码之家 › 专栏 › 技术社区 › JamMan9

VueJS在嵌套的v-for循环中动态添加窗体组件?

vue.js javascript

JamMan9 · 技术社区 · 6 年前

我有以下表格:

当我单击“New Deal Section”按钮时,我会创建一个如下所示的新部分:

但我想做的是,当按下“新建项目”按钮时,能够在每个部分中添加多个文本框。我已经尝试在按下“新政按钮”时创建的容器中嵌套第二个v-for循环,但是没有成功。

我对使用任何类型的JS都很陌生,更不用说VueJS框架了,所以非常感谢您的帮助。以下是我目前的代码:

<!--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>

1 回复 | 直到 6 年前

Wuzi 6 年前

你应该添加 additionals 阵列内部 sections 数组,如下所示:

<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>

J中间: https://jsfiddle.net/Wuzix/qs6t9L7x/