Question

我是VueJS的新手，正在尝试制作一个小页面构建器应用程序，您可以在其中创建部分并向每个部分添加子部分。我不确定如何设置Vue数据属性以允许此操作。任何关于您将如何做这样的事情的见解将不胜感激。到目前为止，这是我的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>

    <div id="app">
        <form>
            <input type="text" v-model="title"> {{title}}<br>
            <button type="button" v-on:click="addSection()">Add Section</button>
        </form>

        <h1>Sections</h1>
        <div v-for="(section, index) in sections">
            <h2>{{section.title}}</h2>
            <form>
                <input type="text" v-model="subTitle"> {{subTitle}}<br>
                <button type="button" v-on:click="addSubSection()">Add SubSection</button>
            </form>

            <div v-for="(subsection, index) in subsections">
                <h3>{{subsection.subTitle</h3>
            </div>
        </div>
    </div>

    <script src="js/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                title: '',
                sections: []
            },
            methods: {
                addSection: function(e) {
                    this.sections.push({title: this.title});
                    this.title = '';
                },
                addSubSection: function(sectionIndex) {
                    this.sections[sectionIndex].push({subTitle: this.subTitle});
                    this.subTitle = '';
                }
            }
        });
    </script>
</body>

Answer 1

您的sections中的每个对象都是对象，而不是数组，因此this.sections[sectionIndex].push()无法正常工作。您可能应该在每个新部分中添加一个sections属性，例如

this.sections.push({ title: this.title, sections: [] })

以及添加子部分时

this.sections[sectionIndex].sections.push({ subTitle: this.subTitle })

您还应该具有subTitle的数据属性

VueJS嵌套生成器示例

1 个答案: