Vue.js嵌套用于循环输入字段模型绑定

在本例中，我允许用户创建自己的类型化分区列表。每种类型都有自己的表单字段。但是，如果在创建了两个重复部分后将数据输入其中一个字段，则两个输入都会用键入的文本进行更新。这不是预期的结果

相反，每个节应单独更新其表单字段数据内容，并应反映回与之相关的data.section中存储的值

我错过了什么

拉维视图

{{Form::open(['route' => 'api.post.store', 'class' => 'form-horizontal'])}}
    <fieldset>
        <div id="legend">
            <legend class="">Register</legend>
        </div>
        <div :key="section.id" v-for="(index,section) in sections" class="control-group form-group-lg">
            <div class="form-header">
                <h3>@{{ section.label }}</h3>
            </div>
            <pre>@{{ section | json }}</pre>
            <div v-for="field in section.fields" :key="field.id">

                <div class="text-field" v-show="field.inputType == 'text'">
                    <label class="control-label" :for="section.name">@{{ field.label }}</label>
                    <div class="controls">
                            <input v-model="field.data.content" class="input-xlarge form-control">
                        <p  class="help-block">@{{ field.helpText }}</p>
                    </div>
                </div>
                <div class="text-area-field" v-show="field.inputType == 'text-area'">
                    <label class="control-label" :for="section.name">@{{ field.label }}</label>
                    <div class="controls">
                        <textarea :v-bind="field.data.content" class="input xlarge form-control"  :placeholder="field.placeholder">
                            @{{ field.data.content }}
                        </textarea>
                    </div>
                </div>
                <div class="text-area-field" v-show="field.inputType == 'data-map'">
                    <label class="control-label" :for="section.name">@{{ field.label }}</label>
                    <div class="controls">
                        <textarea :v-bind="field.data.content" class="input xlarge form-control" :placeholder="field.placeholder">
                            @{{ field.data.content }}
                        </textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="control-group">
           <div class="controls">
               <div class="dropdown">
                   <a data-target="#" href="page.html" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
                   <ul class="dropdown-menu">
                       <li v-for="sectionType in sectionTypes">
                           <a @click="setSectionCreateType(sectionType)" href="#">@{{ sectionType.label }}</a>
                       </li>
                   </ul>
               </div>
           </div>
            <div class="controls">
                <div @click="addSection()" class="btn bdn-success"  class="btn btn-success">Add Section</div>
            <div @click="savePost()" class="btn bdn-success"  class="btn btn-success">Save</div>

        </div>
        </div>
    </fieldset>
{{Form::close()}}

{{Form:：open（['route'=>'api.post.store'，'class'=>'Form horizontal']）}
登记
@{{section.label}}
@{{节| json}}
@{{field.label}
@{field.helpText}
@{{field.label}
@{{field.data.content}
@{{field.label}
@{{field.data.content}




添加节
拯救
{{Form:：close（）}}

Vuefile

从“Vue”导入Vue；
从“/create/FormField.vue”导入FormField；
导出默认值{
组成部分：{
福尔菲尔德，
},
就绪：函数（）{
},
筛选器：{}，
数据（）{
返回{
信息：[]，
章节：[]，
保存节：[]，
sectionCreateType:false，
分段类型：[
{
标签：“公司”，
地图：“公司”，
字段：[
{
标签：“名称”，
姓名：'姓名'，
inputType:'文本'，
占位符：“公司名称”，
数据：{
内容：“”，
},
},
{
标签：“符号”，
名称：'符号'，
inputType:'文本'，
占位符：“股票符号”，
数据：{
内容：“”，
},
}
]
},
{
标签：“链接”，
地图：'链接'，
inputType:'文本'，
数据：{}，
字段：[
{
标签：“url”，
名称：“url”，
inputType:'文本'，
占位符：“Url”，
数据：{
内容：“”，
},
},
]
},
{
标签：'段落'，
地图：'段落'，
数据：{}，
字段：[
{
标签：“内容”，
名称：'内容'，
inputType:'文本区域'，
占位符：“内容”，
数据：{
内容：“”，
},
},
]
},
{
标签：“人”，
地图：“人”，
数据：{}，
inputType:'数据映射'，
“字段”：[
{
标签：“名字”，
姓名：'姓名'，
占位符：“人名”，
数据：{
内容：“”，
},
},
{
标签：“姓氏”，
姓名：'姓名'，
占位符：“人名”，
数据：{
内容：“”，
},
}
]
},
],
}
},
指令：{}，
事件：{}，
方法：{
setSectionCreateType（类型）
{
console.log（'settingsectioncreatetype:'+type.label）
this.sectionCreateType=类型；
},
addSection（）
{
如果（！this.sectionCreateType）{
this.sectionCreateType=this.sectionTyp
<script type="text/javascript">
    import Vue from 'vue';
    import FormField from './create/FormField.vue';
    export default {
        components: {
            FormField,
        },
        ready: function () {

        },
        filters: {},
        data(){
            return {
                messages: [],
                sections: [],
                saveSections: [],
                sectionCreateType: false,
                sectionTypes: [
                    {
                        label: 'Company',
                        map: 'company',
                        fields: [
                            {
                                label: 'name',
                                name: 'name',
                                inputType: 'text',
                                placeholder: 'Company Name',
                                data: {
                                    content: '',
                                },
                            },
                            {
                                label: 'symbol',
                                name: 'symbol',
                                inputType: 'text',
                                placeholder: 'stock symbol',
                                data: {
                                    content: '',
                                },
                            }
                        ]

                    },
                    {
                        label: 'Link',
                        map: 'link',
                        inputType: 'text',
                        data: {},
                        fields: [
                            {
                                label: 'url',
                                name: 'url',
                                inputType: 'text',
                                placeholder: 'Url',
                                data: {
                                    content: '',
                                },
                            },
                        ]

                    },
                    {
                        label: 'Paragraph',
                        map: 'paragraph',
                        data: {},
                        fields: [
                            {
                                label: 'content',
                                name: 'content',
                                inputType: 'text-area',
                                placeholder: 'Content',
                                data: {
                                    content: '',
                                },
                            },
                        ]
                    },

                    {
                        label: 'Person',
                        map: 'person',
                        data: {},
                        inputType: 'data-map',

                        'fields': [
                            {
                                label: 'first_name',
                                name: 'name',
                                placeholder: 'Person Name',
                                data: {
                                    content: '',
                                },
                            },
                            {
                                label: 'last_name',
                                name: 'name',
                                placeholder: 'Person Name',
                                data: {
                                    content: '',
                                },
                            }
                        ]

                    },
                ],


            }


        },
        directives: {},
        events: {},
        methods: {
            setSectionCreateType(type)
            {
                console.log('setting sectionCreateType: ' + type.label)

                this.sectionCreateType = type;
            },
            addSection()
            {
                if (!this.sectionCreateType) {
                    this.sectionCreateType = this.sectionTypes[0];

                }
                this.createSection(this.sectionCreateType);
            },
            createSection(type)
            {
                this.sections.push(Vue.util.extend({}, type))

            },
            previewPost(){
            },
            savePost: function(){
                var view = this;
                var saveObject = [];
                var sectionObject = [];


                this.sections.forEach(function (section) {



                    if(!sectionObject[section.type.map])
                    {
                    sectionObject[section.type.map] = [];
                    }

                    for (var key in section.type.fields) {
                        var field = section.type.fields[key];
                        var saveKey = [];
                        saveKey[field.name] = field.data.content;
                    }
                    sectionObject[section.type.map].push(saveKey);

                });
                saveObject.push(sectionObject);
                console.log(saveObject);

            },
        }


    }

</script>