Javascript VueJS嵌套生成器示例_Javascript_Html_Vue.js_Vuejs2

Javascript VueJS嵌套生成器示例

javascript html vue.js vuejs2

Javascript VueJS嵌套生成器示例,javascript,html,vue.js,vuejs2,Javascript,Html,Vue.js,Vuejs2,我是VueJS新手，正在尝试制作一个小的页面生成器应用程序，您可以在其中创建部分并向每个部分添加子部分。我不确定如何设置Vue数据属性以允许此操作。任何关于你将如何着手做这样的事情的见解都将不胜感激。以下是我目前的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body>

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


{{title}}

添加节
小节
{{section.title}}
{{字幕}}

增加小节
{{小节.副标题
var app=新的Vue({
el:“#应用程序”，
数据：{
标题：“”，
章节：[]
},
方法：{
addSection:函数（e）{
this.sections.push（{title:this.title}）；
this.title=''；
},
addSubSection:函数（sectionIndex）{
this.sections[sectionIndex].push（{subTitle:this.subTitle}）；
this.subTitle=''；
}
}
});

每个

节都是一个对象，而不是数组，因此这个.sections[sectionIndex].push（）
不起作用。您可能应该为每个新节添加一个sections
属性，例如
this.sections.push（{title:this.title，sections:[]））

以及在添加子节时
this.sections[sectionIndex].sections.push（{subTitle:this.subTitle}）


您还应该为subTitle