VueJS 在嵌套的 v-for 循环中动态添加表单组件？

Question

我正在努力实现以下目标，但遇到了障碍。

我有以下表格：

当我单击“新交易部分”按钮时，我创建了一个如下所示的新部分：

然而，我想要做的是能够在按下“新建项目”按钮时在每个部分中添加多个文本框。我尝试在按下“新交易按钮”时创建的容器中嵌套第二个 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>

Answer 1

您应该在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>

JSFiddle：https ://jsfiddle.net/Wuzix/qs6t9L7x/