title: Vue.js nested for loop input field model binding
body: <p>In this example I am allowing the user to create their own typed list of sections. Each type has it's own form fields. The form fields render properly however, if I enter data into one of the fields after I've created two duplicate sections, both inputs are updated with the typed in text. This is not the intended result. </p>
  
  <p>Instead each section should update its form field data content individually and it should reflect back to the value stored within the data.section related to it.</p>
  
  <p>What am I missing?</p>
  
  <p>Laravel View</p>
  
  <pre><code>{{Form::open(['route' =&gt; 'api.post.store', 'class' =&gt; 'form-horizontal'])}}
      &lt;fieldset&gt;
          &lt;div id="legend"&gt;
              &lt;legend class=""&gt;Register&lt;/legend&gt;
          &lt;/div&gt;
          &lt;div :key="section.id" v-for="(index,section) in sections" class="control-group form-group-lg"&gt;
              &lt;div class="form-header"&gt;
                  &lt;h3&gt;@{{ section.label }}&lt;/h3&gt;
              &lt;/div&gt;
              &lt;pre&gt;@{{ section | json }}&lt;/pre&gt;
              &lt;div v-for="field in section.fields" :key="field.id"&gt;
  
                  &lt;div class="text-field" v-show="field.inputType == 'text'"&gt;
                      &lt;label class="control-label" :for="section.name"&gt;@{{ field.label }}&lt;/label&gt;
                      &lt;div class="controls"&gt;
                              &lt;input v-model="field.data.content" class="input-xlarge form-control"&gt;
                          &lt;p  class="help-block"&gt;@{{ field.helpText }}&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="text-area-field" v-show="field.inputType == 'text-area'"&gt;
                      &lt;label class="control-label" :for="section.name"&gt;@{{ field.label }}&lt;/label&gt;
                      &lt;div class="controls"&gt;
                          &lt;textarea :v-bind="field.data.content" class="input xlarge form-control"  :placeholder="field.placeholder"&gt;
                              @{{ field.data.content }}
                          &lt;/textarea&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="text-area-field" v-show="field.inputType == 'data-map'"&gt;
                      &lt;label class="control-label" :for="section.name"&gt;@{{ field.label }}&lt;/label&gt;
                      &lt;div class="controls"&gt;
                          &lt;textarea :v-bind="field.data.content" class="input xlarge form-control" :placeholder="field.placeholder"&gt;
                              @{{ field.data.content }}
                          &lt;/textarea&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="control-group"&gt;
             &lt;div class="controls"&gt;
                 &lt;div class="dropdown"&gt;
                     &lt;a data-target="#" href="page.html" data-toggle="dropdown" class="dropdown-toggle"&gt;Dropdown &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                     &lt;ul class="dropdown-menu"&gt;
                         &lt;li v-for="sectionType in sectionTypes"&gt;
                             &lt;a @click="setSectionCreateType(sectionType)" href="#"&gt;@{{ sectionType.label }}&lt;/a&gt;
                         &lt;/li&gt;
                     &lt;/ul&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
              &lt;div class="controls"&gt;
                  &lt;div @click="addSection()" class="btn bdn-success"  class="btn btn-success"&gt;Add Section&lt;/div&gt;
              &lt;div @click="savePost()" class="btn bdn-success"  class="btn btn-success"&gt;Save&lt;/div&gt;
  
          &lt;/div&gt;
          &lt;/div&gt;
      &lt;/fieldset&gt;
  {{Form::close()}}
  </code></pre>
  
  <p></p>
  
  <p>Vuefile
      
      
          
      
  </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      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);
  
              },
          }
  
  
      }
  
  &lt;/script&gt;
  </code></pre>